Question

我有一个从.tsv文件处理到这个半交互式折线图的3线图：http://infinitepartycles.com/plotGraphMultipleTSV/

代码在这里：

您会注意到与X值“匹配”的Y值标记是错误的;白色＃是打印输出＆lt; y（值）＆gt;。

我希望它将相对Y值输出到滑块值的任何值，但是当我深入挖掘数组中的任何一行时，我得到了未定义的...任何想法？

旁注：行输出到这里：

var p1 = city.append("path") //Add the 3 coloured lines for transport type
  .attr("class", "line")
  .attr("id", function(d) { return d.name; }) // ID of transport type
  .attr("d", function(d) { return line(d.values); }); //data of all Y values

如果我在这里控制台.log（d），为什么我不能得到一个值？

Answer 1

我认为你的刷牙事件太复杂了。它可以重写为：

function brushed() {
    var value = brush.extent()[0].toFixed(0);

    if (d3.event.sourceEvent) { // not a programmatic event
      value = x.invert(d3.mouse(this)[0]).toFixed(0);
      brush.extent([value, value]);
    }

    handle.attr("cx", x(value));
    if (value <= 1) value = 1;

    circleBus
      .attr("opacity", 1)
      .attr("cx", x(value))
      .attr("cy", y(transports[0].values[value-1].people));

    circlePlane
      .attr("opacity", 1)
      .attr("cx", x(value))
      .attr("cy", y(transports[1].values[value-1].people));      

    circleTrain
      .attr("opacity", 1)
      .attr("cx", x(value))
      .attr("cy", y(transports[2].values[value-1].people));
}

参见示例here。

D3.js多图：在X轴上输出滑块值的相对Y值，并与SVG点位置

1 个答案: