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

【问题标题】：How to update handle location on slider of D3js dynamic chart?如何更新 D3js 动态图表滑块上的句柄位置？
【发布时间】：2017-02-11 00:30:12
【问题描述】：

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

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

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

即使指出我正确的方向也将不胜感激！

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

三个必要的更改（但您需要的不止这些）：

handle 是 <path>，路径没有 x 属性。所以，第一个变化是：
```
handlePath.attr("transform", "translate(" + xAxisScale(h) + ",0)");
```

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

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);
```

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

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

【讨论】：