Question

我的代码中有两个不同的d3.svg.area()变量，其中每个变量基本上都可以正常工作（元素是按照我的预期在SVG上绘制的）。

现在我想更改我的代码，以便根据条件选择两种方法中的一种 - 并且它根本不起作用，屏幕上没有任何内容，但控制台也没有记录任何错误。

我的代码如下所示：

    var lineFunction = d3.svg.area()
        .x(function (d) {return d.x;})
        .y(function (d) {return d.y;})
        .y0(function (d) {return (d.y+ 10) ;})
        .y1(function (d) {return (d.y- 10) ;})
        .interpolate("basis");

    var otherFunction = d3.svg.area()
        ....//analogue to above one


    d3arrows.enter()
            .append("path")
            .attr("d", function (d){
                if(condition == 1) {lineFunction}
                else {otherFunction}
             ;})
             //.attr("d", lineFunction ) <--like this it works!
            .attr("stroke", "blue")
            .attr("stroke-width",  2)
            .attr("fill",  "yellow");

我还尝试使用return lineFunction和return otherFunction，但这会导致d3库本身出现“属性错误的值无效”。

if语句的结构应该是正确的，它取自StackOverflow中以前帖子的答案。但是他们都没有使用路径数据生成器，所以也许这就是我的代码的问题。

我在这里做错了什么？

Answer 1

基本上有两个错误：

您的回调中缺少return。
您没有将参数传递给线生成器函数。

解决这个问题的方法可能是这样的：

d3arrows.enter()
        .append("path")
        .attr("d", function (d) {
            if (condition == 1) {
                return lineFunction(d);
            } else {
                return otherFunction(d);
            }
        })

Answer 2

您没有将元素传递给函数。

尝试：

.attr("d", function (d){
                if(condition == 1) {lineFunction(d)}
                else {otherFunction(d)}
             ;})

Answer 3

试试这个：

d3arrows.enter()
        .append("path")
        .attr("d", function (d){
            if(condition == 1) {
                return lineFunction(d);
            } else {
                return otherFunction(d);
            }
         ;})
         //.attr("d", lineFunction ) <--like this it works!
        .attr("stroke", "blue")
        .attr("stroke-width",  2)
        .attr("fill",  "yellow");

需要明确调用

lineFunction和otherFunction。在将函数发送到attr时，d3会自动为您执行此操作，但如果您想在别处使用它们，则必须调用它们。

d3：路径数据生成器和if语句

3 个答案: