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

我的代码中有两个不同的

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

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

var lineFunction=d3.svg.area（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.y0（函数（d）{返回（d.y+10）；}）
.y1（函数（d）{return（d.y-10）；}）
.插入（“依据”）；
var otherFunction=d3.svg.area（）
..//类似于上述一项
D3箭头。输入（）
.append（“路径”）
.attr（“d”，函数（d）{
如果（条件==1）{lineFunction}
else{otherFunction}
;})
//.attr（“d”，lineFunction）您没有将元素传递给函数

尝试：

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

您没有将元素传递给函数

尝试：

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

试试这个：

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

d3箭头。输入（）
.append（“路径”）
.attr（“d”，函数（d）{
如果（条件==1）{
返回函数（d）；
}否则{
返回其他函数（d）；
}
;})
//.attr（“d”，lineFunction）尝试以下操作：

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

d3箭头。输入（）
.append（“路径”）
.attr（“d”，函数（d）{
如果（条件==1）{
返回函数（d）；
}否则{
返回其他函数（d）；
}
;})
//.attr（“d”，lineFunction）基本上有两个错误：

您的回调中缺少一个
返回
您没有将参数传递给line generator函数
一种解决方法是：

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

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

基本上有两个错误：

您的回调中缺少一个
返回
您没有将参数传递给line generator函数
一种解决方法是：

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

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

完美的答案，将参数与return语句结合起来传递，使它工作起来。伟大的完美的答案，将参数与return语句结合起来传递，使它工作起来。伟大的谢谢你的解释，我想知道为什么我在一种情况下需要它，而在另一种情况下我不需要它-现在已经很清楚了。不过，我还必须添加一个返回声明才能使其生效。感谢您的解释，我想知道为什么在一种情况下我需要它，而在另一种情况下我不需要它-现在已经很清楚了。不过，我还必须添加一个return语句才能使其工作。