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函数在轴上绘制值。例如，请参阅this 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)

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

1 个答案: