如何更新D3js动态图表滑块上的句柄位置？ [英] How to update handle location on slider of D3js dynamic chart?

问题描述

我试图查看他的源代码，但没有运气计算出来。 p>

在我的示例小提琴中，我具有以下代码（以及更多）：

  var handle = slider.append（g）。attr类，g参数值句柄）; 
 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）; 
  

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

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

即使指向正确的方向也会非常感谢！

解决方案

三个必要的修改（但你需要更多的修改）：

1. 句柄是一个< path> a 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 的函数。

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

Here is a fiddle of a simple sample chart.

I am new to learning about D3.js.

I've been unable to figure out through tutorials or documentation how to create a tooltip like Mike Bostock did in his amazing Rent Versus Buy calculator in the New York Times, shown here:

I've tried to look at his source code but haven't had luck figuring it out.

In my sample fiddle, I have the following code (and a lot more):

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

I'm not sure why the handle doesn't move when dragged [even though it successfully changes the values of the input box and of any related charts (not shown in the fiddle)].

I also haven't been able to figure out how to "fix" and format the numeric value (resulting from the dragging) that gets put into the input text box.

Even pointing me in the right direction would be much appreciated!

解决方案

Three necessary changes (but you'll need more than that):

1. handle is a <path>, and paths don't have a x attribute. So, the first change is:

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

2. As you can see, I'm defining a new variable here:

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

3. In your input, just use h:

   input.property('value', h);
   

However, there is an additional problem: you don't have a function called drawAllCharts. So, you'll have to create a specific update function to change the bars.

Here is the updated fiddle: https://jsfiddle.net/bh58u8ks/

这篇关于如何更新D3js动态图表滑块上的句柄位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！