nvd3：在折线图后面设置背景填充答案

【问题标题】：nvd3: set background fill behind line chartnvd3：在折线图后面设置背景填充
【发布时间】：2015-04-15 19:48:24
【问题描述】：

我有一些数据在一个地方用来制作热图，在另一个地方用来制作折线图。我想在折线图后面放置一个渐变，以便折线图上的点出现在热图中使用的颜色之前。

如果我理解正确，只需在适当的 svg 元素上设置填充，但我没有发现任何迹象表明 nvd3 会帮助我找到该元素。我可以使用 nvd3 API 执行此操作，还是必须对图表进行逆向工程才能找到或插入该元素？

【问题讨论】：

@JoshJordan，“nv API”是指通过名为“nv”的对象公开的 API。没有名为“nvd3”的对象；在我看来，基于 d3 构建的 nv 是一个与我对 API 的使用无关的实现细节。用“nvd3”替换每次使用“nv”有何改进？

标签： javascript svg charts nvd3.js

【解决方案1】：

仍然没有迹象表明 nvd3 会对此有所帮助，但事实证明很容易找到合适的元素来填充。

简单来说就是element_to_fill = d3_object_of_svg_with_chart.select("rect");

对此至少有两个警告：

渐变必须在同一<svg> 标记中的<defs> 标记内的linearGradient 标记中定义。用 jQuery 调用添加这个不行，必须用 d3 调用添加。
这个元素的高度可能是错误的，特别是如果图例超过一行，但由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 了解折线图样式。）

【讨论】：