如何更新D3js动态图表滑块上的手柄位置？

Question

Here is a fiddle of a simple sample chart.

我新了解D3.js。

我无法通过教程或documentation 了解如何创建像Mike Bostock在他惊人的Rent Versus Buy calculator in the New York Times中所做的工具提示，如下所示：< / p>

我试图查看他的源代码，但没有运气搞清楚。

在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");

我不确定为什么拖动时手柄不会移动[即使它成功更改了输入框和任何相关图表的值（未在小提琴中显示）]。

我还没有能够弄清楚如何修复＆＃34;并格式化放入输入文本框的数值（由拖动产生）。

即使把我指向正确的方向，也会非常感激！

Answer 1

三个必要的变化（但你需要更多）：

1. private String meslek; 是handle，路径不具有<path>属性。所以，第一个变化是：

   x

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

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

3. 在您的输入中，只需使用var handlePath = handle.append("path").attr("d", "M-5.5,-2.5v10l6,5.5l6,-5.5v-10z") .attr("transform", "translate(" + initialXPos + "," + -6 + ")"); ：

   h

但是，还有一个问题：您没有名为input.property('value', h); 的功能。因此，您必须创建一个特定的更新功能来更改条形。

这是更新的小提琴：https://jsfiddle.net/bh58u8ks/