gpt4 book ai didi

javascript - nvd3 : set background fill behind line chart

转载 作者:行者123 更新时间:2023-11-29 21:50:15 27 4
gpt4 key购买 nike

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

如果我没理解错的话,所需要做的就是在适当的 svg 元素上设置填充,但我还没有发现任何迹象表明 nvd3 会帮助我找到该元素。我可以使用 nvd3 API 执行此操作,还是必须对图表进行逆向工程以查找或插入该元素?

最佳答案

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

简而言之,就是element_to_fill = d3_object_of_svg_with_chart.select("rect");

至少有两个注意事项:

  1. 渐变必须在 linearGradient 中定义<defs> 内的标签标签在同一<svg>标签。用 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 关于折线图样式。)

关于javascript - nvd3 : set background fill behind line chart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29659507/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com