javascript - 如何更新D3js动态图表 slider 上的句柄位置？

Question

<强> Here is a fiddle of a simple sample chart.

我刚开始了解 D3.js .

我无法通过教程或 documentation 弄清楚 如何像 Mike Bostock 在他令人惊叹的 Rent Versus Buy calculator in the New York Times 中所做的那样创建工具提示，如下所示:

我尝试查看他的源代码，但没能弄清楚。

在 my sample fiddle ，我有以下代码(以及更多):

 var handle = slider.append("g").attr("class", "g-parameter-value handle");
 var initialXPos = xAxisScale(chartEl.attr("data-value"));
 handle.append("path").attr("d", "M-5.5,-2.5v10l6,5.5l6,-5.5v-10z")
   .attr("transform", "translate(" + initialXPos + "," + -6 + ")");
 handle.append("text").style("text-anchor", "middle").attr("y", 20).attr("dy", ".71em");

我不确定为什么 handle 在拖动时不移动[即使它成功更改了输入框和任何相关图表的值(未在 fiddle 中显示)]。

我也无法弄清楚如何“修复”和格式化放入输入文本框中的数值(由拖动产生的)。

即使为我指出正确的方向，我也会非常感激!

Answer 1

三个必要的更改(但您需要的不止这些):

1. handle是 <path> ，并且路径没有 x属性。所以，第一个改变是:

   handlePath.attr("transform", "translate(" + xAxisScale(h) + ",0)");
   

2. 如您所见，我在这里定义了一个新变量:

   var handlePath = handle.append("path").attr("d", "M-5.5,-2.5v10l6,5.5l6,-5.5v-10z")
       .attr("transform", "translate(" + initialXPos + "," + -6 + ")");
   

3. 在您的输入中，只需使用 h :

   input.property('value', h);
   

但是，还有一个额外的问题:您没有名为 drawAllCharts 的函数。因此，您必须创建一个特定的更新函数来更改条形。

这是更新后的 fiddle :https://jsfiddle.net/bh58u8ks/