4

首先，我要感谢这里的社区，你们对我的帮助。

我在这里构建示例的自定义版本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>
4

1 回答 1

5

我不知道 nvd3 是否提供了将处理程序附加到元素的任何功能（我认为它没有），但是您可以在“纯”d3 中很容易地做到这一点。代码看起来像

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

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

d3 和 nvd3 都没有为模式对话框提供任何功能。不过，您应该能够毫无问题地使用jQuery 对话框之类的东西。创建对话框的代码位于事件处理函数内部。

于 2013-03-21T18:09:16.853 回答