D3 js多个折线图切换点的开/关 [英] D3 js multiple line graph toggle dots on/off

问题描述

此D3 js示例显示了生成可切换的多线图的所有代码.图中的每条线都包含现有数据点的点.

This D3 js example shows all the code to produce a multi-line graph that can be toggled. Each line in the graph includes dots for existing data points.

尽管可以打开/关闭线条，但点会停滞不前.我希望该切换开关可同时用于两者来打开/关闭行&与同一行关联的点.

While the lines can be toggled on/off, the dots stay stagnant. I would like for the toggle to work for both turning on/off the line & the dots that are associated with the same line.

我怀疑svg.append("text")是需要代码更新以同时使点与线一起打开/关闭的部分.

I suspect that the svg.append("text") is the part that requires code update to also enable the dots to be turned on/off along with the line.

这是打开/关闭折线图的现有代码片段，但没有打开/关闭点.

Here is the existing code snipet that turns on/off the line graph, but it doesn't turn on/off the dots.

svg.append("text")
        .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
        .attr("y", height + (margin.bottom/2)+ 5)
        .attr("class", "legend")    // style the legend
        .style("font-size","15px")  // Change the font size
        .style("font-weight", "bold") // Change the font to bold
        .style("text-anchor", "middle") // center the legend
        .style("fill", function() { // Add the colours dynamically
            return d.color = color(d.key); })
        .on("click", function(){
            // Determine if current line is visible 
            var active   = d.active ? false : true,
            newOpacity = active ? 0 : 1; 
            // Hide or show the elements based on the ID
            d3.select("#tag"+d.key.replace(/\s+/g, ''))
                .transition().duration(100) 
                .style("opacity", newOpacity); 
            // Update whether or not the elements are active
            d.active = active;
            })  
        .text(d.key); 

请帮助.

推荐答案

ID是唯一.您不能为多个不同的DOM元素设置相同的ID.

IDs are unique. You cannot set the same ID for several different DOM elements.

解决方案:改为设置类.

对于这些行:

.attr("class", 'tag'+d.key.replace(/\s+/g, ''))

对于圈子:

.attr("class", d=>'tag'+d.symbol.replace(/\s+/g, ''))

然后，获取有关click事件的类(使用selectAll，而不是select):

Then, get the class on the click event (use selectAll, not select):

d3.selectAll(".tag"+d.key.replace(/\s+/g, ''))

这是更新的小提琴: http://jsfiddle.net/gx4zc8tq/

这篇关于D3 js多个折线图切换点的开/关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！