Question

我正在尝试使用带有以下对象的d3创建折线图：

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] }

这是我目前创建该行的代码：

<body>
<script>
var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };
var w=400;
var h=50;

var line = d3.svg.line()
             .x(function(d,i){return x(d.x[i])})
             .y(function(d,i){return y(d.y[i])})
             .interpolate("linear");

var svg = d3.select("body")
            .append("svg")
            .attr({
            "width":w,
            "height":h
            })

var path = svg.append("path")
              .attr({
                d:line(data),
                "fill":"none",
                "stroke":"black"
              })

</script>
</body>

感谢您的帮助！

Answer 1

这里的关键问题是线生成器需要一个数组，其中每个项表示一个点，而不是两个x和y值的数组。行生成器的访问器方法允许您设置数据数组中每个对象的哪些属性用于x和y值：

生成一行时，将为每个调用x [/ y]访问器输入数据数组中定义的元素，传递给元素d，索引i和数组数据作为三个参数。默认x [/ y] accessor假定输入数据是两元素数组数字。（source）

因此，我们需要从以下位置重新排列数据数组：

{x: [1,2,3,4,5...], y: [1,2,3,4,5] }

为：

[{x:1,y:1},{x:2,y:2},{x:3,y:3}...]

为此，我们可以使用：

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };

var rearrangedData = data.x.map(function(d,i) {
  return {x:d,y:data.y[i]}; 
})

console.log(rearrangedData);

然后我们可以显示以下行：

var data = {x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],  y: [66, 67, 68, 68, 69, 70, 70, 75, 76, 78] };
var w=400;
var h=200;

var rearrangedData = data.x.map(function(d,i) {
  return {x:d,y:data.y[i]}; 
})


var x = d3.scale.linear().domain([0,9]).range([0,w])
var y = d3.scale.linear().domain([65,80]).range([h,0])

var line = d3.svg.line()
             .x(function(d){ return x(d.x)})
             .y(function(d){return y(d.y)})
             .interpolate("linear");

var svg = d3.select("body")
            .append("svg")
            .attr({
            "width":w,
            "height":h
            })

var path = svg.append("path")
              .attr({
                "d":line(rearrangedData),
                "fill":"none",
                "stroke":"black"
              })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

使用d3使用对象数组的折线图

1 个答案: