1

使用

var line = d3.svg.line()
             .x( function(p) { return x( p ); })
             .y( function(p) { return y( p ); })


svg.selectAll("path")
   .data( this.data )
   .enter().append("path")
   .attr("class","line " + name)
   .attr("d", function(d) { return line(d); } )

我想为情节创建一条线。我有一个使用.datum而不是.data(并且逻辑略有不同)的工作实现。我想使用data,因为在这个电话之后,我正在使用

.append("text")
   .attr('x', function(d, i){return x(self.data[i][0]) })
   .attr('y', function(d, i){return y(self.data[i][1]) })
   .attr("dy", ".35em")
   .style("text-anchor", "middle")
   .text(function(d, i) { return "a label"});

我的数据被格式化为“元组”数组(长度为 2 的数组)。似乎文本已正确附加,但没有任何效果,因为我无法使路径正常工作。

当我记录d--- .attr("d", function(d) { console.log(d); return line(d); })--- 的输出时,我看到了我的“元组”,但是,当我记录 x 和 y 的输出时,每个值都针对 xy 重复。那是,

     .x( function(p) { console.log("x :  "+p);return x( p ); })
     .y( function(p) { console.log("y :  "+p);return y( p ); })

节目

x :  [TIMESTAMP1]
y :  [TIMESTAMP1]
x :  [VALUE1]
y :  [VALUE1]
x :  [TIMESTAMP2]
y :  [TIMESTAMP2]
x :  [VALUE2]
y :  [VALUE2]

我一直在试图弄清楚如何使 x 值对应于 x 值和 y 值对应于 y 值

我一直在摆弄 line 函数以尝试使值以我想要的方式出现。其中最令人沮丧的部分是文档line指出

默认访问器假定每个输入元素是一个二元素数字数组:

这就是我给它的。我试过给它访问器,但很明显,提供给.x()函数的数据是不正确的。

我试图弄清楚哪种方法负责处理数据。

4

0 回答 0