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

【问题标题】：Make An Line Chart Using Array - D3.js使用数组制作折线图 - D3.js
【发布时间】：2015-10-06 15:49:02
【问题描述】：

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

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

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

请给我同样的建议。

提前谢谢你。

【问题讨论】：

有很多带有 D3 的折线图示例，例如this one.
是的，这是真的，但我对 d3.js 一无所知。那么你能帮我用上面的数组制作一个折线图吗？谢谢
现在我也将数组转换为：[{"x":"xyz","y":"1"},{"x":"abc","y": “2”}]。如果有人准备好寻求帮助，那么也可以使用这个数组。谢谢。

标签： javascript php d3.js charts

【解决方案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)

【讨论】：

感谢您的回复，但现在我希望 y 轴是动态的，并将“xyz”的点绘制为 1，将“abc”的点绘制为 2，那么我需要什么？
你的意思是改变x轴数据吗？
在 X 轴 "xyz" 和 Y 轴 ="1" 上是，并在图上的点 1 处绘制点，也与 abc 相同。
查看编辑后的 plnkr (plnkr.co/edit/0ym1WKkkmIJMcdDSLESB?p=preview)。如果它解决了您的问题，请接受此答案，如果您遇到更多问题并有更多问题，请提出新问题。