D3.js multigraph:在x轴上输出滑块值的相对Y值，并与SVG点位置匹配

D3.js multigraph: Output Relative Y Value of a Slider Value on the X-Axis, and match to SVG point location

本文关键字：相对 并与 SVG 位置 multigraph js 输出 D3      更新时间：2023-09-26

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

代码:

http://codepen.io/ferret/pen/BoxKyX

你会注意到Y值标记"匹配"到X值是错误的;那个白色的#是<y(价值)>。

我希望它输出相对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

为什么我不能得到一个值，如果我console.log(d)在这里?

我觉得你把刷过的事件弄得太复杂了。它可以重写为:

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));
}
相关文章：