d3.js過渡基線到線性線縮短/隱藏線的一部分

我已經做了一些與d3.js的工作，但我堅持在這個問題上。我有一個以平滑線和圓圈開始的多線圖。我想要發生的是當我切換圖例按鈕時，線條應該在基礎（平滑）和線性（正常）之間轉換。但是，當我點擊按鈕時，我注意到從基礎到線性的過渡發生，但是隨後部分線段消失並且與點不匹配。d3.js過渡基線到線性線縮短/隱藏線的一部分

爲了創建線我有兩個線功能。一個用於線性和一個用於基礎。

var lineGen = d3.svg.line() 
    .interpolate("linear") 
    .x(function(d) { 
     return xScale(+d.tx_week); 
    }) 
    .y(function(d) { 
     return yScale(d.RelativeChange); 
    }); 

    var lineMean = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { 
     return xScale(+d.week); 
    }) 
    .y(function(d) { 
     return yScale(d.amount); 
    });

然後，我創建的基礎線調用lineMean功能爲「d」屬性

var line = tx_year_grp.selectAll("path") 
    .data(function(d) { return [d]; }) 
    .enter().append("svg:path") 
    .attr("class", "line") 
    .attr("fill", "none") 
    .attr("d", function(d) { return lineMean(d.values); }) 
    .style('stroke', function(d) {return color(d.key); }) 
    .on('mouseover', function(){ 
     var sel = d3.select(this) 
     .style('stroke-width', 4) 
     this.parentNode.parentNode.appendChild(this.parentNode); 
    }) 
    .on('mouseout', function(d) { 
     d3.select(this) 
     .transition() 
     .duration(750) 
     .style('stroke-width', 2) 
    });

然後我添加轉場創建的所有線路。

for(u=0; u < nested_data.length; u++){ 
    var pathId = document.getElementById('tx_year_grp' + nested_data[u].key); 
    var updPath = d3.select(pathId).selectAll("path"); 
    var totalLength = updPath.node().getTotalLength(); 

    updPath 
    .attr("stroke-dasharray", totalLength + " " + totalLength) 
    .attr("stroke-dashoffset", totalLength) 
    .transition() 
    .duration(0) 
    .ease("linear") 
    .attr("stroke-dashoffset", 0) 

    }//end for

這正是我想要的，並創建一個基準線。當我切換我的圖例按鈕以使線條成直線並連接到點時，會發生轉換，但是線條會自行擦除或覆蓋，從而使線條顯得更短，並且不會與所有點連接。

這裏是我改變線的代碼。我稱之爲lineGen函數，它將插值切換爲「線性」。

var linearLine = tx_year_grp.selectAll（「。line」）; （「d」，function（d）{return lineGen（d.values）;}）;}}

這看起來相當直接，但我做錯了什麼。任何幫助將不勝感激。

在此先感謝

來源

2016-02-25 user3684875

確定這裏是我的解釋：

的線性路徑會比基礎路徑長。

但它仍然會將筆劃短劃線設置爲基礎路徑的長度，然後對於另一個等效長度爲空 - .attr("stroke-dasharray", totalLength + " " + totalLength)（爲什麼您有筆劃短劃線？）。因此，路徑長度比基準線更長的線性線的任何部分都將爲空白，因爲它將延伸到筆劃短劃線樣式的空位中。嘗試刪除stroke-dash屬性以查看。

如果這不起作用，嘗試進行的jsfiddle讓人們可以有一個戳一下

來源

2016-02-25 21:50:24 mgraham

感謝您，您的建議的工作就像一個魅力。我將屬性「stroke-dasharray」設置爲0，一切正常。我正在使用該屬性來爲轉換中的線條製作動畫（並且是在我正在研究的示例中）。再次感謝你的幫助！ – user3684875

d3.js過渡基線到線性線縮短/隱藏線的一部分

回答

相關問題