Question

This D3 js example显示了生成可以切换的多线图的所有代码。图中的每一行包括现有数据点的点。

虽然可以打开/关闭线条，但点仍然停滞不前。我希望切换适用于两个打开/关闭线路＆amp;与同一行关联的点。

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

以下是打开/关闭折线图的现有代码snipet，但它不会打开/关闭点。

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

请帮忙。

Answer 1

ID 唯一。您无法为多个不同的DOM元素设置相同的ID。

解决方案：改为设置类。

对于这些行：

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

对于圈子：

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

然后，在点击事件上获取课程（使用selectAll，而不是select）：

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

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

D3 js多线图切换点打开/关闭

1 个答案: