nvd3：設置背景填充線圖表背後

Question

我有一些數據，該數據在一個地方用來製作熱圖，而在另一個地方，使折線圖。我想提出一個梯度線圖背後，使線圖上的點出現在熱圖中使用的顏色的前面。

如果我理解正確的，所有的需要是適當的SVG元素上設置填充，但我還沒有發現nvd3幫我看看該元素的任何指示。我能做到這一點與nvd3 API，還是我不得不反向工程圖表來查找或插入元素？

Answer 1

目前仍然沒有跡象表明nvd3將幫助這一點，但事實證明，它很容易找到相應的元素來填充。

總之，它是element_to_fill = d3_object_of_svg_with_chart.select("rect");

至少有2個警告此：

1. 梯度必須在linearGradient標籤在同一<svg>標籤來定義一個<defs>標籤內。用jQuery調用添加此功能不起作用，它必須添加d3調用。
2. 該元素的高度可能是錯誤的，特別是如果圖例是一個以上的線，而是由lineChart_object.update();

代碼固定看起來有點像這樣：

nv.addGraph(function() { 
    var chart = nv.models.lineChart(); 
    //... set up chart as before 
    var chart_d3 = d3.select("#"+container_element_id).append("svg"); 
    chart_d3.datum(chart_data_array); 
    chart_d3.call(chart); 

    // Now draw the gradient background: 
    var grad_id = some_unique_id_string; 
    var defs_d3 = chart_d3.insert("defs", ":first-child"); // define gradient 
    var grad_d3 = defs_d3.append("linearGradient").attr("id",grad_id).attr("x1","0%").attr("y1","0%").attr("x2","0%").attr("y2","100%"); 
    grad_d3.append("stop").attr("offset","0%").attr("style","stop-color:rgb(255,0,0);stop-opacity:1"); 
    grad_d3.append("stop").attr("offset","100%").attr("style","stop-color:rgb(0,255,0);stop-opacity:1"); 
    var fill_d3 = chart_d3.select("rect"); // get nvd3's background rect 
    fill_d3.attr("style",null); // nvd3 applies style="opacity: 0.5;" 
    fill_d3.attr("fill","url(#"+grad_id+")"); 
    chart.update(); // nvd3 gets height wrong before update 
    return chart; 
}); 

對於完整的例子，見this codepen。 （這裏的樣式和預期的很不一樣，但是背景漸變效果很好，另請參閱this question關於折線圖樣式。）