使用Array - D3.js制作线图

Question

我想用带有php的d3.js制作一个线状图。我的数组如下所示：

{"x_axis":["xyz","abc","pqr"],"y_axis":["1","2","2"]}

我想把整个x_axis数组放在x轴上，y_axis数组放在y轴上。

请给我同样的忠告。

提前谢谢你。

Answer 1

您必须使用d3.scale.ordinal和map函数来绘制轴上的值。例如，请参见这件事。

      var xScale = d3.scale.ordinal()
        .rangeBands([0,300],0.01);

var yScale = d3.scale.ordinal()
.rangeBands([0,300],0.01);


xScaleMappedValues = xScale.domain(data.map( function(d) {console.log(d.x); return d.x;}))
yScaleMappedValues =  yScale.domain(data.map( function(d) {console.log(d.y); return d.y;}))

编辑:根据这些值绘制数据点

svg.append("g")
.attr("class","datapoint")
.selectAll(".gCircle")
.data(data)
.enter()
.append("g")
.append("circle")
.attr("cx", function(d) {console.log(d.x); return xScale(d.x)  +  xScale.rangeBand()/2 })
       .attr("cy", function(d) { return yScale(d.y) +  yScale.rangeBand()/2; })
       .attr("r",5)