NVD3 LinePlusBarChart .enableFocus onClick 不起作用

Question

我正在尝试使用 this example as a guide. The code can be found here 使用 NVD3 库切换焦点图。

这是我用来切换的按钮：

<div>
  <button onclick="chart_users_new.focusEnable(!chart_users_new.focusEnable()); chart_users_new.update();">toggle focus</button>
</div>

这是我的图表代码：

var chart_users_new
nv.addGraph(function() {
  chart_users_new = nv.models.linePlusBarChart()
    .margin({top: 30, right: 80, bottom: 50, left: 80})
    .color(d3.scale.category10().range())
    .tooltipContent(function(key, x, y, e, graph) {
       //irrelevant 
    });;

  // FULL Graph
  chart_users_new.xAxis.tickFormat(function(d) {
    return d ? d3.time.format('%H:%M%')(new Date(d)) : '';
  });

  chart_users_new.xAxis.axisLabel('Label');

  chart_users_new.y2Axis
    .axisLabel('Label')
    .tickFormat(d3.format(',.'));

  chart_users_new.y1Axis
    .axisLabel('Content at time (true or false)')
    .tickFormat(d3.format(',f'));

  chart_users_new.bars.forceY([0]);

  chart_users_new.lines.forceY([0]);

  d3.select('#chart_users_new2 svg')
      .datum(new_chart_concurrent_users_data)
      .transition()
      .duration(0)
      .call(chart_users_new)
      .selectAll('rect.nv-bar').style("fill-opacity", function(d, i){
        return d.has_content == true ? 0.8:0.5;
      });


  nv.utils.windowResize(chart_users_new.update);

  return chart_users_new;
});

当我点击按钮时，这是在 Chrome 中打印到控制台的错误：

Uncaught TypeError: chart_users_new.focusEnable is not a function

非常感谢任何帮助，谢谢。

Answer 1

您需要包含与您链接到的示例中相同的库才能获得此功能。

NVD3 LinePlusBarChart .enableFocus onClick 不起作用

NVD3 LinePlusBarChart .enableFocus onClick no working

javascript

d3.js

nvd3.js