Question

首先，我要感谢社区，这是我收到的帮助。

构建示例的自定义版本

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

我知道这听起来很复杂，但我只是很难导航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的东西而不会出现问题。创建对话框的代码进入事件处理函数。

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

1 个答案: