在d3图表（nvd3）中启动可关闭模态窗口的可点击数据点 [英] Clickable datapoints that launches closeable modal window in d3 chart (nvd3)

问题描述

首先，我要感谢社群在这里您收到的帮助。

First of all I want to thank the community here your the help I've received.

我在这里建立一个自定义版本的例子 http://nvd3.org/ghpages/scatter.html

I'm building a custom version of the example here http://nvd3.org/ghpages/scatter.html

有没有办法让每个圈子成为可点击的链接？然后当您点击该链接时，是否显示一个来自该圈子的模态弹出窗口？

Is there a way to make each circle be a clickable link? and then when you click the link, have a modal popup that appears originating from the circle? with a close button on the modal.

我知道这听起来很复杂，但我只是很难导航那个NVD3库，它已被弃用/放弃了吗？我找不到任何文档。我读过斯科特·默里的指南，但似乎NVD3图书馆已被大量修改，我从斯科特·穆雷读的大多数是不真正适用于这个例子。

I know that sounds complicated but I'm just having a hard time navigating that NVD3 library, has it been deprecated/abandoned? I cannot find any documentation on it. I've read Scott Murray's guide but it seems like the NVD3 library has been heavily modified, most of what I read from Scott Murray isn't really applying in this example.

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

my example page is here http://goo.gl/pUKW9 and the code i have is....

<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>

推荐答案

我不知道nvd3是否提供任何功能附加处理程序到元素（我认为它不），但你可以很容易地在纯d3。代码看起来像

I don't know if nvd3 provides any functionality to attach handlers to elements (I think it doesn't), but you can do this quite easily in "pure" d3. The code would look something like

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

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

where svg is a reference to the container element of the graph. You might have to be more specific in the selector, e.g. add a specific class (selectAll("circle.myclass")).

d3和nvd3都不提供任何功能模态对话框。您应该可以使用类似 jQuery对话框，但没有问题。创建对话框的代码在事件处理函数中。

Neither d3 nor nvd3 provide any functionality for modal dialogs. You should be able to use something like jQuery dialog without problems though. The code that creates the dialog goes inside the event handler function.

这篇关于在d3图表（nvd3）中启动可关闭模态窗口的可点击数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！