如何打开对SVG javascript d3的模态单击

Question

我正在使用javascript和d3进行数据可视化处理。在本文中，我使用各种图表显示数据(数据来自外部源)。我是这门语言的新手，所以我使用了来自互联网不同部分的代码，很多工作都来自于编辑这些代码，以使它们彼此兼容。

我成功地部署了图表(对于我来说，这是一个很大的成就，因为我在一周前刚开始使用javascript和HTML )。现在我想在点击图表的条形图或者至少在标签上打开一个模态，但是我遇到了一些麻烦。

图表上的条形图是这样定义的：

  var vakken = svg.selectAll(".question")
  .data(data)
.enter().append("g")
  .attr("class", "bar")
  .attr("transform", function(d) { return "translate(0," + y(d.Question) + ")"; });

var bars = vakken.selectAll("rect")
  .data(function(d) { return d.boxes; })
.enter().append("g").attr("class", "subbar");

bars.append("rect")
  .attr("height", 16)
  .attr("x", function(d) { return (x(d.x0)); })
  .attr("width", function(d) { return (x(d.x1) - x(d.x0)); })
  .style("fill", function(d) { return color(d.name); });

任何关于如何实现这一目标的评论都将受到赞赏(并且可以随意嘲笑我，这是我应得的)。

Answer 1

您可以将图表中的条形图定义为'rect‘dom元素(与’bars.append(.)‘并列)。作为每个dom元素，您可以通过JavaScript访问它。要访问这些条，您必须添加一个id或类，例如：

bars.append("rect").attr("id", "bar01")...

然后访问它并添加onclick事件：

$("#bar01").click(function(e) { ... });

或者用纯JS：

document.getElementById("bar01").onclick = function(e) { ... };

希望能帮上忙..。

编辑:我忘了你的问题，如何打开一个模态对话框。有几种方法可以实现打开一个模态对话框。最简单的方法是使用像materializecss之类的库或类似的东西。然而，有很多东西将应用于您的项目。

下面是一个简单的示例，您如何使用jQuery实现它，因为jQuery暂时保持了函数的简单性。

首先，您必须添加一个div元素，放在屏幕的中央。默认情况下，这个div元素是隐藏的：

// HTML
<div id="modal01" class="modal">Blabla</div>

// CSS
.modal {
  position: absolute;
  left: ...
  ...
  display: none;
  z-index: 10;
}

Z-索引用于保证您的模式对话框位于页面的前面。

为了避免单击其他元素，我们使用了一个使用整个屏幕的进一步div：

// HTML
<div id="box" class="modal-box"></div>

// CSS
.modal-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none
}

默认情况下，此box也是隐藏的。当您单击该条时，将同时显示两个div，例如：

$("#bar01").click(function (e) {
  $("#modal01").show();
  $("#box").show();
});

如果单击该框，模式将被关闭(例如)：

$("#box").click(function (e) {
  $("#modal01").hide();
  $("#box").hide();
});

我认为，你找到了进一步的步骤;)