使用数组制作折线图-D3.js

Question

我想使用d3.js和php制作折线图。 我的数组如下所示：

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

我想将整个x_axis数组放在折线图的x轴上，并将y_axis数组放在折线图的y轴上。

请同样建议我。

先感谢您。

Answer 1

您将必须使用d3.scale.ordinal和map函数在轴上绘制值。 例如，请参见此plnkr 。

      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)