nvd3.js为特定的条、tooptips和xAxis标签着色
提问于 2013-09-29 18:31:38
我使用nvd3.js绘制一个multiBarChart。
xAxis显示日期，我需要更改周六和周日的工具栏、工具提示和xAxis标签的颜色。
我可以在我的json中添加额外的参数，例如：
{ x: someX, y: someY, series: 0, isHoliday: true }但是，例如，在tooltipContent回调函数中，我不能访问json元素，因为它有这样的参数-键，x，y，e，图。
在tickFormat回调函数中，我也不能访问json元素，因为第一个参数是x值，第二个参数是索引。
这是HighCharts示例- https://www.dropbox.com/s/yf1rx5axl5h5wb2/2013-09-29_2216.png
谢谢并为我的英语表达歉意。
回答 2
Stack Overflow用户
发布于 2014-02-09 13:56:57
可以通过e.point属性访问其他属性。
例如，对于工具提示部分，您可以使用如下代码：
var chart = nv.models.multiBarChart()
.options({
showXAxis: true,
showYAxis: true,
transitionDuration: 250
}).tooltip(function (key, x, y, e, graph) {
if (e.point.isHoliday) {
//your custom code here
}
}以下是其他两个问题的其他几个选项：
为了改变条形图的颜色，你可以这样做：
d3.selectAll("rect.nv-bar")
.style("fill-opacity", function (d, i) { //d is the data bound to the svg element
//Used opacity here but anything can be changed
return d.isHoliday ? .8 : .6;
})对于标签部分，我选择了下面的代码，而不是tickFormat回调，因为我需要对标签进行更多的控制。
d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
.attr('transform', function (d, i, j) {
return d.isHoliday ? 'translate (0, 15)' : ''; //Lowers the label text for the holiday instances
})
.attr('class', function (d, i, j) {
return d.isHoliday ? 'holiday-graph-legend' : 'default-graph-legend';
})Stack Overflow用户
发布于 2013-09-29 18:51:47
在NVD3中没有这样做的选项。你基本上有两个选择。
SVG
- 您可以使用生成的SVG进行修改。因此，您将选择生成的条形图，然后再选择相关条形图并对其进行相应的更改。不过这相当笨拙；首先，您需要等到所有内容都生成后才能执行此操作。
- 您可以修改NVD3源代码以执行您想要的操作。
我会推荐第二个选项。你更加灵活，可以做任何你想做的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19081726
复制相关文章
点击加载更多
腾讯云开发者
