Question

我无法弄清楚为什么在附加的JSFiddle图表过渡期间，条形图不能正确刷新。

如果单击“点击我”几次，您将看到选择DATA1时（例如）不显示x值为13到19的条形。我有三个数据集，图表随机选择用于刷新本身，每个数据集都有不同数量的x值。

有人可以帮我理解。先感谢您！

代码：

var data;

var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
},
width = 838 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.05);

var yL = d3.scale.linear()
    .range([height, 0]);

var yR = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxisL = d3.svg.axis()
    .scale(yL)
    .orient("left")
    .ticks(10);

var yAxisR = d3.svg.axis()
    .scale(yR)
    .orient("right")
    .ticks(10);

var EfficiencyLine = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.xaxis);
})
    .y(function (d) {
    return yR(d.max_efficiency);
});

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
    return "<strong>Energy:</strong> <span class='tt-text'>" + d.max_energy + "</span><br /><strong>Efficiency:</strong> <span class='tt-text'>" + d.max_efficiency + "</span>";
})

var svg = d3.select("#daychart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

var which_data = Math.floor(Math.random() * 3) + 1
switch (which_data) {
    case 1:
        data = data1;
        break;
    case 2:
        data = data2;
        break;
    case 3:
        data = data3;
        break;
    default:
};

//d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=CDAY&id=C1200031", function (error, data) {
data.forEach(function (d) {
    d.max_energy = +d.max_energy;
    d.max_efficiency = +d.max_efficiency;
});

x.domain(data.map(function (d) {
    return d.xaxis;
}));
yL.domain([0, d3.max(data, function (d) {
    return d.max_energy;
})]);

yR.domain([0, d3.max(data, function (d) {
    return d.max_efficiency;
})]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("transform", "rotate(0)")
    .attr("y", 23)
    .attr("x", 340)
    .attr("dy", ".71em")
    .style("text-anchor", "bottom")
    .text("Timeline");

svg.append("g")
    .attr("class", "y-l axis")
    .call(yAxisL)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -50)
    .attr("x", -145)
    .attr("dy", ".71em")
    .style("text-anchor", "top")
    .text("Energy - KWh");

svg.append("g")
    .attr("class", "y-r axis")
    .attr("transform", "translate(" + width + " ,0)")
    .call(yAxisR)
    .append("text")
    .attr("y", 50)
    .attr("x", -160)
    .attr("transform", "translate(" + width + " ,0)")
    .attr("transform", "rotate(-90)")
    .attr("dy", ".71em")
    .style("text-anchor", "top")
    .text("Efficiency - KWh/KW");

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)
    .attr("class", "bar")
    .attr("x", function (d) {
    return x(d.xaxis);
})
    .attr("width", x.rangeBand())
    .attr("y", function (d) {
    return yL(d.max_energy);
})
    .transition().delay(function (d, i) {
    return i * 10;
})
    .duration(10)
    .attr("height", function (d) {
    return height - yL(d.max_energy);
});

svg.append("path")
    .attr("d", EfficiencyLine(data))
    .attr("class", "EfficiencyLine");

/* //Create labels
svg.selectAll("text.label")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "label")
    .text(function (d) {
    if (d.max_energy == 0) {
        return "";
    } else {
        return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
    };
})
    .attr("x", function (d) {
    return x(d.xaxis) + x.rangeBand() / 2;
})
    .attr("y", function (d) {
    return yL(d.max_energy) - 2;
})
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "black");
*/
//});

//On click, update with new data            
d3.select("p").on("click", function () {

    var which_data = Math.floor(Math.random() * 3) + 1
    switch (which_data) {
        case 1:
            data = data1;
            break;
        case 2:
            data = data2;
            break;
        case 3:
            data = data3;
            break;
        default:
    };

    // Get the data again
    //      d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PDAY&id=P100023", function (error, data) {
    data.forEach(function (d) {
        d.max_energy = +d.max_energy;
        d.max_efficiency = +d.max_efficiency;
    });

    // Scale the range of the data again 
    x.domain(data.map(function (d) {
        return d.xaxis;
    }));
    yL.domain([0, d3.max(data, function (d) {
        return d.max_energy;
    })]);
    yR.domain([0, d3.max(data, function (d) {
        return d.max_efficiency;
    })]);

    svg.select("g.x").call(xAxis);
    svg.select("g.y-l").call(yAxisL);
    svg.select("g.y-r").call(yAxisR);

    // Make the changes
    svg.selectAll(".bar") // change the bar
    .data(data) // Update the data within.
    .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .attr("x", function (d) {
        return x(d.xaxis);
    })
        .attr("y", function (d) {
        return yL(d.max_energy);
    })
        .attr("width", x.rangeBand())
        .attr("height", function (d) {
        return height - yL(d.max_energy);
    });

    svg.selectAll("path.EfficiencyLine") // change the EfficiencyLine
    .data(data) // Update the data within.
    .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .attr("d", EfficiencyLine(data));

/*    svg.selectAll("text.label")
        .data(data)
        .transition().delay(function (d, i) {
        return i / data.length * 1000;
    })
        .duration(500)
        .text(function (d) {
        if (d.max_energy == 0) {
            return "";
        } else {
            return parseFloat(Math.round(d.max_energy * 100) / 100).toFixed(1);
        };
    })
        .attr("x", function (d) {
        return x(d.xaxis) + x.rangeBand() / 2;
    })
        .attr("y", function (d) {
        return yL(d.max_energy) - 2;
    })
*/
    //});

});

Answer 1

您还需要在更新函数中处理.enter()和.exit()选项，因为数据集的大小不同：

var sel = svg.selectAll(".bar") // change the bar
    .data(data);
sel.exit().remove();
sel.enter().append("rect")
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr("class", "bar");

sel.transition().delay(function (d, i) {
    return i / data.length * 1000;
})...

完整示例here。

d3js图表转换功能不正常

1 个答案: