设置d3.curveBundle.beta似乎没有任何效果 [英] Setting d3.curveBundle.beta seems to have no effect

问题描述

d3上的d3文档.curveBundle（） 提供了一个如何设置 beta ：

var line = d3.line().curve(d3.curveBundle.beta(0.5));

然而，提供的 beta 的值似乎对此没有影响曲线产生。这是一个最小的例子，使用 beta = 0.0，它应该在两个端点之间产生一条直线：

However, the value of beta supplied seems to have no effect on the curve produced. Here is a minimal example, using beta = 0.0 which should produce a straight line between the two end points:

// create a 300x300 svg element
var w = 300;
var h = 300;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

// create a line generator
var rl = d3.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  })
  .curve(d3.curveBundle.beta(0.0));

// three points used to generate the path
var line_data = [{
  x: 0,
  y: -100
}, {
  x: 100,
  y: 0
}, {
  x: 0,
  y: 100
}];

// path generated from line_data
svg.append("path")
  .attr("d", rl(line_data))
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", "2px")
  .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

// three circles corresponding to the points in line_data
svg.selectAll("circle")
  .data(line_data)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", 2)
  .style("fill", "black")
  .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.min.js"></script>

无论的值如何，此代码都会产生相同的结果beta 提供。我缺少什么？

This code produces the same result regardless of the value of beta supplied. What am I missing?

推荐答案

问题

Problem

看来d3.min.js与此功能相关。常规未缩小的d3.js中不存在此问题（v4.7.1 - 问题中的版本）。所以，你做得对，没有遗漏任何东西，似乎是通过缩小过程引入的错误。

It appears that d3.min.js is broken in relation to this functionality. This problem is not present in regular un-minified d3.js (both v4.7.1 - the version in the question). So, you were doing it right, weren't missing anything, just seems to have been an error introduced through the minification process.

更新和决议

Update And Resolution

这是由Altocumulus和Gerardo Furtado确认的（见下面的评论）。 Altocumulus深入挖掘并发现了缩小和非缩小d3.js之间的实际差异，在github上标记问题。 Mike Bostock迅速将错误源于所使用的uglify-js版本：

This was confirmed by Altocumulus and Gerardo Furtado (see comments below). Altocumulus dug into it and found the actual discrepancy between the minified and non-minified d3.js, flagging the issue on github. Mike Bostock quickly sourced the error to the version of uglify-js used:

这是UglifyJS过度激进的优化，即
在最近的一个版本中引入，看起来像是一个糟糕的默认值我将
看到关于禁用它或降级UglifyJS。

This is an excessively aggressive optimization by UglifyJS that was introduced in a recent release and seems like a bad default. I will see about disabling it or downgrading UglifyJS.

Mike已经繁琐地更新所有模块并立即推出新版本（发行说明）。据记载，距离Altocumulus将问题标记为新版本只有7个小时。

Mike has since tediously updated all modules and put out a new release today (release notes). For the record, that was only 7 hours from Altocumulus's flagging the issue to a new release.

演示：

以下三个片段应该具有相同的代码（基于上面的代码），并且只与d3脚本源有所不同。第一个是4.7.1未缩小，第二个是4.7.1缩小，第三个是4.7.2缩小。

The following three snippets should have identical code (based on the above code) and only differ in relation to the d3 script source. The first one is 4.7.1 un-minified, the second 4.7.1 minified, and the third 4.7.2 minified.

D3.js非缩小v4.7.1 ：

D3.js non-minified v4.7.1:

// create a 300x300 svg element
            var w = 300;
            var h = 300;
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

            // create a line generator
            var rl = d3.line()
                .x(function(d) {return d.x;})
                .y(function(d) {return d.y;})
                .curve(d3.curveBundle.beta(0.0));

            // three points used to generate the path
            var line_data = [{x:0,y:-100},{x:100,y:0},{x:0,y:100}];

            // path generated from line_data
            svg.append("path")
                .attr("d",rl(line_data))
                .style("fill", "none")
                .style("stroke", "red")
                .style("stroke-width", "2px")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

            // three circles corresponding to the points in line_data
            svg.selectAll("circle")
                .data(line_data)
                .enter()
                .append("circle")
                .attr("cx", function(d) {return d.x;})
                .attr("cy", function(d) {return d.y;})
                .attr("r",2)
                .style("fill","black")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.js"></script>

并且d3.js缩小为v4.7.1：

And d3.js minified v4.7.1:

// create a 300x300 svg element
            var w = 300;
            var h = 300;
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

            // create a line generator
            var rl = d3.line()
                .x(function(d) {return d.x;})
                .y(function(d) {return d.y;})
                .curve(d3.curveBundle.beta(0.0));

            // three points used to generate the path
            var line_data = [{x:0,y:-100},{x:100,y:0},{x:0,y:100}];

            // path generated from line_data
            svg.append("path")
                .attr("d",rl(line_data))
                .style("fill", "none")
                .style("stroke", "red")
                .style("stroke-width", "2px")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

            // three circles corresponding to the points in line_data
            svg.selectAll("circle")
                .data(line_data)
                .enter()
                .append("circle")
                .attr("cx", function(d) {return d.x;})
                .attr("cy", function(d) {return d.y;})
                .attr("r",2)
                .style("fill","black")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.min.js"></script>

更新（缩小）4.7.2：

Updated (minified) 4.7.2:

// create a 300x300 svg element
            var w = 300;
            var h = 300;
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

            // create a line generator
            var rl = d3.line()
                .x(function(d) {return d.x;})
                .y(function(d) {return d.y;})
                .curve(d3.curveBundle.beta(0.0));

            // three points used to generate the path
            var line_data = [{x:0,y:-100},{x:100,y:0},{x:0,y:100}];

            // path generated from line_data
            svg.append("path")
                .attr("d",rl(line_data))
                .style("fill", "none")
                .style("stroke", "red")
                .style("stroke-width", "2px")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

            // three circles corresponding to the points in line_data
            svg.selectAll("circle")
                .data(line_data)
                .enter()
                .append("circle")
                .attr("cx", function(d) {return d.x;})
                .attr("cy", function(d) {return d.y;})
                .attr("r",2)
                .style("fill","black")
                .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>

这篇关于设置d3.curveBundle.beta似乎没有任何效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！