Question

我正在开始一个新项目，主要目的是学习一些基本的main.html。这是我的玩具问题：我想绘制一个带有几个矩形的交互式流程图，当用户悬停/点击一个矩形时，我想用箭头指向场景中的其他矩形来显示依赖关系。我还希望在其他地方显示一些文本，条件是此用户操作。

最终目标是这样的：

这是我的出发点，受到一些基本教程的启发：

的index.html

<script>

的script.js

d3.js

有人可以说明（/指向我）处理悬停或点击的一般程序，并基于此生成内容（箭头，文字）吗？

PS：我很满意R以更合适的格式预处理数据。我已经使用yaml作为输入格式，并且根据需要似乎很容易从中生成json。 d3映射和交互性是我总是新手的地方。

Answer 1

首先：在<svg>上，你有<text>而不是<p>，令人沮丧的是，它不会自行封闭。要包装文本，请查看Mike Bostock's Block。

一般的点击功能采用以下形式：

selection.on('click', function (data, index) {
    stuff();
})

悬停使用mouseover和mouseout代替click。对于主题，似乎click是显示箭头的明智选择，mouseover是'其他文本'。在您的情况下，它可能看起来像这样：

rectangles.on('click', function (d, i) { //1
    d3.select('svg').append('path').attr('d', pathString); //2
    d3.selectAll('rect').filter(function (k, j) {
        return k.name == d.depends; //3
    }).each(function () {
        d3.select(this).on('click')(); //4
    });
}).on('mouseover', function (d, i) { //5
    d3.select('text#moreinfo').text(d.extraInfo);
});

箭头必须是path个元素，除非您为每个元素添加polygon个元素，否则它们不会有头部。

将点击事件附加到每个矩形。
附加到svg一个path元素（它是一行）。
从名称中找到必备课程rect。
为每个（或单个）先决条件矩形调用click事件。请注意，由于每次单击事件都是以这种方式设置的，因此这实际上是一个递归调用，它将为链中的每个先决条件绘制箭头。
附加一个鼠标悬停处理程序，该处理程序将更改“其他文本”text元素的文本，前提是您先前已将其设置。

为了使箭头变冷和弯曲，如图所示，您需要计算路径的控制点。 Here是一个很酷的图形，可以解释CubicBézierCurves的路径是如何工作的。您应该能够使用一些基本几何计算控制点。

我建议先熟悉svg。

点击和悬停后的箭头和文字

1 个答案: