Question

当我按下单选按钮时，我想制作一个更改Y轴和X轴数据的代码，我现在一切正常，除了我不知道如何更改多行数据的事实

我想通过使用另一个.csv文件来更改数据，在开始时我使用“dataBelgium.csv”，我想将我的数据更改为“dataNetherlands.csv”

以下是我的HTML代码中的radiobuttons：

<form>
    <input type="radio" onclick="updateDataToBelgium()" name="country" value="UpdateToBelgium" checked>Belgium
    <br>
    <input type="radio" onclick="updateDataToNetherlands()" name="country" value="The_Netherlands">The Netherlands
    </form>

这里我定义了行（我使用的数据来自链接到我的代码的CSV文档）

// Define the lines
var CRIME = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.CRIME); });

var GDP = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) { return y(d.GDP); });

这里我将行添加到我的svgContainer中（在此代码中我使用“dataBelgium.csv”来获取.attr（“d”）的值

// Add the CRIME path.
svg.append("path")
    .attr("class", "line")
    .attr("d", CRIME(data))
    .attr("stroke", "red");

// Add the GDP path.
svg.append("path")
    .attr("class", "line")
    .attr("d", GDP(data))
    .attr("stroke", "steelblue");

并且最重要的是：在这里我有我的代码，我改变了行的数据（在这段代码中，我用“dataNetherlands.csv”来获取.attr（“d”）的值

// Get the data again
    d3.csv("dataNetherlands.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.CRIME = +d.CRIME;
            d.GDP = +d.GDP;
        });

// Select the section we want to apply our changes to
var svg = d3.select("body").transition();

    // Make the changes <-- HERE I CHANGE THE LINE VALUES
        svg.select(".line")   // change the line
            .duration(750)
            .attr("d", CRIME(data));

我知道我只更改了CRIME行的数据，因为我只使用了这一行但是如何选择另一行，因为我只能使用“svg.elect（”。line“）？

PS。将.attr("d", CSV(data));添加到代码块中将不起作用

Answer 1

所以当你创建GDP线时

//add another class crime to differentiate your GDP line
svg.append("path")
    .attr("class", "line crime")
    .attr("d", CRIME(data))
    .attr("stroke", "red");

...
//add another class gdp to differentiate your GDP line
svg.append("path")
    .attr("class", "line gdp")
    .attr("d", GDP(data))
    .attr("stroke", "steelblue");

现在当你选择更新双陆的犯罪行时

svg.select(".crime")   
        .duration(750)
        .attr("d", CRIME(data));
svg.select(".gdp")   
        .duration(750)
        .attr("d", GDP(data));

简而言之，类名将区分两行。

D3 - 改变多行的数据onclick

1 个答案: