4

我正在关注分层边缘捆绑的 d3 示例 - http://mbostock.github.io/d3/talk/20111116/bundle.html

我只感兴趣的是，如何在以下示例之上以最简单的方式将张力功能合并到上述示例中（其代码在此处）：

在此处输入图像描述

我已经研究了@第一个链接的代码，但无法确定代码的哪些部分属于所需的功能。@第二个链接但是，我知道可能涉及/更改了以下代码。请指导我。

var line = d3.svg.line.radial()
                .interpolate("bundle")
                .tension(.85)
                .radius(function (d) {
                     return d.y;
                })      
                .angle(function (d) {
                     return d.x / 180 * Math.PI;
                });
4

2 回答 2

0

从第一个链接中示例的源代码：

页面上需要有输入

<input style="position:relative;top:3px;" type="range" min="0" max="100" value="85">

初始化视图时，它订阅输入更改事件并tension相应地更新参数：

d3.select("input[type=range]").on("change", function() {
  line.tension(this.value / 100);
  // more needed here (see below)
});

需要的另一件事（第一个示例所做的，但具有不同的变量名称）从输入更改处理程序中根据新值重绘所有路径。在你的情况下，它可能是这样的（也许不完全正确；你必须尝试一下）：

link.attr("d", line);
于 2015-02-22T21:41:20.867 回答
0

line.tension(this.value / 100)在d3.v4中不起作用。它会抛出一个错误说

line.tension is not a function

你需要做的是：

按照meetamit的建议放置一个输入标签，

<input style="position:relative;top:3px;" type="range" min="0" max="100" value="85">

然后在你的

d3.json("flare.json", function (error, classes) {}功能

添加以下代码：

d3.select("input[type=range]").on("change", function () { line.curve(d3.curveBundle.beta(this.value / 100)); link.attr("d", line); });

于 2018-05-04T07:31:55.470 回答