Question

我使用nvd3.js绘制multiBarChart。

xAxis显示日期，我需要更改星期六和星期日酒吧，工具提示和xAxis标签的颜色。

我可以在json中添加其他参数，例如：

{ x: someX, y: someY, series: 0, isHoliday: true }

但是，例如，在tooltipContent回调函数中，我无法访问json元素，因为它有这样的参数 - key，x，y，e，graph。

在tickFormat回调函数中，我也无法访问json元素，因为第一个参数是x值，第二个参数是索引。

这是HighCharts示例 - https://www.dropbox.com/s/yf1rx5axl5h5wb2/2013-09-29_2216.png

谢谢你，对不起我的英语。

Answer 1

可以通过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'; 
            })

Answer 2

在NVD3中没有选项可以做到这一点。你基本上有两个选择。

您可以获取生成的SVG并进行修改。因此，您将选择生成的柱，然后再选择相关的柱并相应地更改它们。但这非常笨拙;首先，您需要等到所有内容都生成之后才会这样做。
您可以修改NVD3源以执行您想要的操作。

我会推荐第二个选项。你更灵活，可以做你想做的事。

nvd3.js着色特定条形图，tooptips和xAxis标签

2 个答案: