nvd3:设置背景填充线后图

Question

我有一些数据，在一个地方用来制作热图，在另一个地方用来制作线图。我想在线条图后面放一个渐变，这样线图上的点就会出现在热图中使用的颜色前面。

如果我理解得对，所需要的就是为适当的svg元素设置fill，但我还没有发现任何迹象表明nvd3将帮助我找到该元素。我可以用nvd3 API来完成这个任务吗?或者我必须逆向工程图表才能找到或插入这个元素吗？

Answer 1

仍然没有迹象表明nvd3将在这方面提供帮助，但事实证明，很容易找到合适的元素来填充。

简而言之，它是element_to_fill = d3_object_of_svg_with_chart.select("rect");

这方面至少有两个注意事项：

1. 渐变必须在同一linearGradient标记中的<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;
} );

有关完整的示例，请参见这个密码。(那里的样式与预期有很大的不同，但是背景梯度正在起作用。也请参阅关于线图样式的这个问题。)