d3.js - 在 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) { ... });

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

d3 和 nvd3 都不为模态对话框提供任何功能。你应该可以使用类似 jQuery dialog 的东西虽然没有问题。创建对话框的代码位于事件处理函数中。