將nvd3 linePlusBarChart調整爲具有累積百分比線的直方圖？

Question

我一直在尋找的選項，以建立直方圖，和之前我試圖做的準系統D3，我發現nvd3的linePlusBarChart必要的，但給定的example沒有被設計爲與累積百分比線直方圖。

隨着社會的幫助下，我好不容易纔得到這樣的chart done in d3。然後我去嘗試適應它並得到this far。

似乎出於某種原因，我得到兩個圖表，一個小型預覽在與頂部大圖底部，且線圓形點，即是大圖上太大。我如何才能讓它成爲一張圖表，沒有任何問題（或者至少是非常小的點數），並且使它更像基本的d3版本？

有什麼建議嗎？

Answer 1

我不知道，如果使用nvd3（外觀/感受），是適合你的要求，但它聽起來像是你試圖複製D3直方圖榜樣」 ......讓它匹配更像基本D3版？」。

如果你對純粹的d3版本很好，看看這個fiddle，它對this直方圖的例子做一些小的修改。

首先，我們添加一個累積的財產到D3直方圖功能

data.forEach(function(d,i){ 
    if(i === 0){ 
    d.cum = d.y 
    }else{ 
    d.cum = d.y + data[i-1].cum 
    } 
}) 

接下來，我們創建唉規模爲累積行的結果

var yc = d3.scale.linear() 
.domain([0, d3.max(data, function(d) { return d.cum; })]) 
.range([height, 0]); 

然後，聲明線功能，使使用我們新的屬性和yc比例尺

var line = d3.svg.line() 
.x(function(d) { return x(d.x); }) 
.y(function(d) { return yc(d.cum); }); 

最後畫出累計lin Ë

svg.append("path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line); 

關於你貼，你可以設置圖表的「focusEnable」假擺脫底部圖表nvd3例子。

var chart = nv.models.linePlusBarChart() 
     .margin({top: m.top, right: m.right, bottom: m.bottom, left: m.left}) 
     .x(function(d,i) { return i }) 
     .y(function(d,i) {return d[1] }) 
     .focusEnable(false) 
     ; 

其他問題（大圓點和陰影區域）是與css相關的。添加nvd3的css文件應該可以解決它們。看到這fiddle。

希望這會有所幫助。