D3多線圖表互動圖例問題

Question

我被要求在我的多線圖表中添加一個交互圖例。我的多線圖表有一個有兩個鍵的嵌套，它使我的傳說變得困難。以下是我用於添加交互式圖例的舊EAMPLE。

我的問題：

1）我想顯示圖例頂級鍵，以便它顯示SYSTEM01，system02，system03等，而不是顯示兩個鍵一起。例如，system01 0和systmem01 2變爲system01，因此當它被點擊時它將隱藏兩條線。

2）使線條處於非活動狀態後，鼠標懸停在圖表上時仍會顯示工具提示。

這裏是我的FIDDLE

片段添加傳說：

var chartBody = svg.append("g") 
    .attr("class", "chartbody") 
    .attr("clip-path", "url(#clip)"); 

for (var key in storages) { 
    if (storages.hasOwnProperty(key)) { 
     console.log("key:", key, [storages[key]]); 
     var capSeries = d3.line() 
      .x(function(d) { 
       return x(d.date); }) 
      .y(function(d) { 
       return y(d.availableVolumeCapacity); }) 
      .curve(d3.curveCardinal); 
     // mapping of data to line using the capSeries function 
     chartBody.append("path") 
      .data([storages[key]]) 
      .attr("class", "line") 
      .attr("id", 'tag'+ key.replace(/\s+/g, '')) 
      .attr("d", capSeries) 
      .style("stroke", z(key)); 
    } 
} 

// spacing for the legend 
legendSpace = width/nest.length; 

// Loop through each symbol/key 
nest.forEach(function(d,i) { 

// Add the Legend 
    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("fill", function() { // Add the colours dynamically 
      return d.z = z(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

看看這個：https://jsfiddle.net/mkwne5uh/

對於2） 一個簡單的解決辦法是跟蹤隱藏並有條件地應用鼠標懸停和鼠標懸停。

// define an array to hold the hidden info 
var hidden = []; 
... 
... 
// Loop through each symbol/key 
    nest.forEach(function(d,i) { 

    // Add the Legend 
     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("fill", function() { // Add the colours dynamically 
       return d.z = z(d.key); }) 
      .on("click", function(){ 

       // Update whether or not the elements are active 
       // initial d.active will be undefined, so on first click 
       // d.active will become false like this 
       d.active = !d.active; 
       // Determine if current line is visible 
       newOpacity = d.active ? 0 : 1; 

       // if category is not active now, remove it 
       if(!d.active){ 
        hidden.splice(hidden.indexOf(d.key), 1); 
       } 
       else{// keep it for use later on 
        hidden.push(d.key) 
       } 
       // Hide or show the elements based on the ID 
       d3.select("#tag"+d.key.replace(/\s+/g, '')) 
        .transition().duration(100) 
        .style("opacity", newOpacity); 
       }) 
      .text(d.key); 
    }); 

然後：

function mouseover(d) { 
    if(hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return; 
.... 
function mouseout(d) { 
     if(hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return; 

至於1）你可以使用.text(d.key.split(" ")[0])但我不敢肯定這將是最好的解決辦法。

希望這會有所幫助，祝你好運！