如何打开模态点击SVG javascript d3 [英] How to open a modal clicking on SVG javascript d3

问题描述

我正在使用javascript和d3开发数据可视化程序.在此项目中，我将使用各种图表来显示数据(数据来自外部来源).我是这种语言的新手，所以我使用的是来自互联网不同部分的代码段，其中许多工作来自于编辑这些代码段以使其相互兼容.

I'm working on a data visualization proyect, using javascript and d3. In this proyect I'm showing the data using various charts (the data comes from an external source). I'm new in this language so I´m using pieces of code from differents parts of the internet and a lot of the work comes from editing those pieces in order to make them compatible with each other.

我已经成功地部署了图表(对我来说是一个很大的成就，因为一周前我刚开始使用javascript和HTML).现在，我希望能够在单击图表的条形或至少在标签上的条形时打开模式，但是我对此有些麻烦.

I have succefully deploy the charts (A big accomplishment for me, since I started with javascript and HTML just one week ago). Now i want to be able to open a modal when clicking the bars of the charts or, at least, on the labels, but I'm having some trouble with that.

这是图表上条形的定义方式:

This is how the bars on the chart are defined:

  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); });

任何关于如何实现这一目标的评论将不胜感激(随意嘲笑我，我应得的)

Any comment on how to achieve this will be appreciated (And feel free to mock me, i kind of deserve it)

推荐答案

您可以将图表的条形定义为矩形" dom元素(与"bars.append(...)"对齐).作为每个dom元素，您都可以通过JavaScript访问它.要访问栏，您必须添加一个ID或类，例如:

You define your bars of your chart as 'rect' dom elements (line with 'bars.append(...)'). As each dom element, you can access it via JavaScript. To access the bars, you have to add an id or class, e.g.:

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

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

Then you access it and add your onclick event:

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

或者使用纯JS:

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

我希望它能对您有所帮助...

I hope it helps...

我忘记了您的问题如何打开模式对话框.有几种方法可以打开模式对话框.最简单的方法是使用 materializecss 之类的库.但是，有很多东西可以应用到您的项目中.

I've forgot your question how to open a modal dialog. There are several ways to achieve to open a modal dialog. The easiest way is to use a library like materializecss or something similar. However, there is a lot of stuff that will be applied to your project.

这是一个简单的示例，由于jQuery暂时使函数保持简单，因此如何使用jQuery实现它.

Here is a simple example, how you can achieve it with jQuery since jQuery keeps the functions simple for the moment.

首先，您必须添加一个 div 元素，将其放置在屏幕中央.默认情况下，此div元素是隐藏的:

At first, you have to add a div element which you place in the center of the screen. This div element is hidden by default:

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

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

z-index 用于确保模式对话框位于页面的顶部.

The z-index is used to guarantee that you modal dialog is in the front of your page.

为避免点击其他元素，我们使用了另一个使用整个屏幕的div:

To avoid the clicking on other elements, we use a further div that uses the whole screen:

// 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，例如:

This box is also hidden by default. When you click the bar, then you show both divs, e.g.:

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

如果您单击该框，则模态将被关闭(例如):

If you click on the box, the modal will be closed (as an example):

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

我认为，您可以找到进一步的步骤;)

I think, you find out the further steps ;)

这篇关于如何打开模态点击SVG javascript d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！