在d3图表(nvd3)中启动可关闭模态窗口的可点击数据点

Question

首先,我要感谢社区,我得到了你的帮助.

我正在http://nvd3.org/ghpages/scatter.html构建示例的自定义版本

有没有办法让每个圆圈成为可点击的链接？然后当您单击链接时,是否有一个源自圆圈的模态弹出窗口？在模态上有一个关闭按钮.

我知道这听起来很复杂,但我只是很难浏览NVD3库,它已经被弃用/放弃了吗？我找不到任何文件.我已经阅读过Scott Murray的指南,但似乎NVD3库经过了大量修改,我从Scott Murray那里读到的大多数内容并没有真正适用于这个例子.

我的示例页面在这里http://goo.gl/pUKW9,我的代码是....

<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>
<script>
//Format A
var chart;

nv.addGraph(function() {
  chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.height(500)
                .useVoronoi(true)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))

  d3.select('#test1 svg')
      .datum(randomData(4,40))
    .transition().duration(500)
      .call(chart)


  nv.utils.windowResize(chart.update);

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

  return chart;
});


function randomData(groups, points) { //# groups,# points per group
var data = [
{key: 'Weak Guidance', values: [
{x: 1, y: 1}
, {x: 2, y: 3}
, {x: 4, y: 9    }]},

{key: 'Strong Guidance', values: [
{x: 32, y: 0}
, {x: 3, y: 54}
, {x: 1, y: 8}  ]              }];

  return data;
}


</script>

Answer 1

我不知道nvd3是否提供了将处理程序附加到元素的任何功能(我认为它没有),但你可以在"纯"d3中很容易地做到这一点.代码看起来像

svg.selectAll("circle").on("click", function(d, i) { ... });

where svg是对图的容器元素的引用.您可能必须在选择器中更具体,例如添加特定的类(selectAll("circle.myclass")).

d3和nvd3都没有为模态对话框提供任何功能.你应该能够使用jQuery对话之类的东西而不会出现问题.创建对话框的代码进入事件处理函数.