javascript – 使用d3js根据用户选择调用备用图表绘制功能

我正在尝试使用d3js实现可重用的图表,其中图表类型根据用户选择从下拉菜单中更改.

我的代码在这里：http://tributary.io/inlet/8085642

目标：当用户从下拉菜单中选择类型时,重新绘制新图表类型以代替旧图表.

我根据需要设置了所有内容：可以手动绘制每个图表,下拉菜单将控制台.log我想要绘制的图表类型的名称(线,区域,蜡烛),但显然目标是以编程方式执行此操作.

编辑：从下面消除,与上述原始问题无关.

解决方法:

正如Lars所说,问题不在于让可重复使用的图表发挥作用. (实际上,我不会把这个称为“可重用的图表”,就像你传递参数的可自定义图表函数一样;你只有多个不同的函数.)但无论如何：你的代码在使用不同的选项时工作得很好你在其他函数调用中发表评论.缺少的是Javascript触发调用和一些清理.我在下面讨论了如何做到这一点,但可能会将标题/问题更新为“根据用户选择调用备用图表绘图功能”或其他类似内容.

您需要三件事：

>附加到下拉菜单的事件侦听器,以便在选择更改时触发代码,
>一种删除或隐藏当前图表数据的方法,以及
>一个读取所选值并调用相应绘制函数的函数.

你已经在这里获得了事件监听器：

 d3.select("#drop-down").on("change", function () { 
    selected = this.value;
    console.log(selected);
 });

它在控制台上返回值很好,但你需要实际调用适当的方法,如下所示：

 d3.select("#drop-down").on("change", function () { 
    selected = this.value;
    if(selected == "line"){chartDraw.line()}
    else if(selected == "area"){chartDraw.area()}
    else if(selected == "candle"){chartDraw.candle()}
 });

如果您有很多案例,您可能希望将其重新编写为switch statement.

然而,这并不是你想要的 – 新的图形只是在旧的图形之外.您需要的是一种重新选择每种图形类型唯一的元素的方法,以便您可以删除它们.为此,您需要为chartDraw方法中创建的所有元素添加一个类,例如.attr(“class”“line alt-view”)或“candle alt-view”等,然后在事件处理函数中再添加一行：

 d3.select("#drop-down").on("change", function () { 
    selected = this.value;
    d3.selectAll(".alt-view").remove();
    if(selected == "line"){chartDraw.line()}
    else if(selected == "area"){chartDraw.area()}
    else if(selected == "candle"){chartDraw.candle()}
 });

这为您的重绘创建了一个干净的画布(不删除您的轴和其他常量元素).

这应该让它工作,但你仍然可以使它更有效,这取决于你期望它如何使用.如果您希望用户在不同视图之间来回切换(并且不希望数据在此期间发生变化),您可能只想隐藏备用视图而不是删除然后重新绘制它们.

隐藏很容易;只需用.style(“visibility”,“hidden”)替换上面的.remove().但是你还需要一种方法来测试你是否已经绘制了一个特定的图表视图,这样你就可以用.style(“visibility”,“visible”)显示它,而不是重新绘制.我的建议？只需创建布尔变量并在第一次绘制每个图表时设置它们,然后在图表绘制方法中检查它们：

var areaDrawn=false, lineDrawn=false, candleDrawn=false; 

(或将这些全部收集到一个对象中：viewDrawn = {area：false,line：false等等……并相应地更改下面的代码)

//inside the chartDraw object
   area: function (){
     if(areaDrawn){
        d3.selectAll(".area.alt-view").style("visibility", "visible");
     }
     else {  
      canvas.append("path")
        .datum(sample2)
        .attr("class", "area alt-view")
        .attr("d", area);

      areaDrawn=true;
     }
    }
//and similar for the other functions

最后一件事我无法弄清楚：当您从下拉菜单中选择某些内容时,菜单不会立即使用所选值重绘.值会发生变化,如果我跳开并返回,则会显示正确的值,但不会立即显示.我不确定Tributary中是否存在这种情况,或者与Chrome在SVG中处理foreignObjects的方式有关.无论哪种方式,它都可以测试,也许可以考虑在SVG之外创建菜单(由容器div组合在一起),用于生产代码.

希望一切都有道理,我已经尝试一步一步地做到这一点,
–ABR

标签：javascript,charts,d3-js,reusability
来源： https://codeday.me/bug/20191003/1849587.html