javascript - 如何更改 d3.js 中的 json 文件并使用选择选项更新图表

Question

我正在通过 d3.js 学习 JavaScript。

我正在尝试使用选择选项更改 json 文件以更新 d3 图表。

我做到了:

1. 我创建了一个 d3.js 图表。
2. 我为 select id 添加了选项。
3. 我从 options 添加了 var v = this.value; 到 d3.json

我得到的结果改变了数据集，但是它再次写入 x 和 y 轴 + bars 并且再次。

d3.json("jsonFile_1.json", function(err, data) {
    createVis(data);
});

function createVis(json) {

    var n = 3, // number of layers
        m = json.length, // number of samples per layer
        data = d3.layout.stack()([
            json.map(function(d, i) {
                return {
                    x: i,
                    y: parseInt(d.aspersion),
                    date: d.date
                };
            }),
            json.map(function(d, i) {
                return {
                    x: i,
                    y: parseInt(d.manual),
                    date: d.date
                };
            }),
            json.map(function(d, i) {
                return {
                    x: i,
                    y: parseInt(d.cultivo),
                    date: d.date
                };
            })
        ]);

    var p = 20,
        w = 660 - 2.5 * p,
        h = 425 - .5 * p,
        mx = m,
        my = d3.max(data, function(d) {
            return d3.max(d, function(d) {
                return d.y0 + d.y;
            });
        }),
        x = function(d) {
            return d.x * w / mx;
        },
        y0 = function(d) {
            return h - d.y0 * h / my;
        },
        y1 = function(d) {
            return h - (d.y + d.y0) * h / my;
        },
        y2 = function(d) {
            return d.y * h / my;
        },
        format = d3.format(",");

    var x_range = d3.scale.linear().domain([0, data[0].length - 1]).range([10, w - 40]);

    var vis = d3.select('#chartviz')
        .append('svg')
        .attr("width", w + 2.5 * p)
        .attr("height", h + p);

    var layers = vis.selectAll('g.layer')
        .data(data)
        .enter()
        .append('g')
        .style("fill", function(d, i) {
            return color(i);
        })
        .attr("class", "layer");

    var bars = layers.selectAll("g.bar")
        .data(function(d) {
            return d;
        })
        .enter()
        .append("g")
        .attr("class", "bar")
        .attr("transform", function(d) {
            return "translate(" + x(d) + ")";
        });

    var xAxis = d3.svg.axis().scale(x_range)
        .ticks(17);

    var y_range = d3.scale.linear()
        .domain([0, yStackMax])
        .range([h, 0]);

    var yAxis = d3.svg.axis().scale(y_range)
        .ticks(7)
        .orient('right');

    vis.selectAll('g.bar').append('rect')
        .attr("x", function(d, i) {
            return x({
                x: .9 * ~~(i / m) / n
            });
        })
        .attr("width", x({
            x: .9 / n
        }))
        .attr("y", h)
        .attr("height", 0)
        .transition()
        .delay(function(d, i) {
            return i * 10;
        })
        .attr("y", function(d) {
            return h - y2(d);
        })
        .attr("height", y2);

    vis.append('svg:g')
        .attr('class', 'x axis')
        .attr("transform", "translate(10," + h + ")")
        .call(xAxis);

    vis.append('svg:g')
        .attr('class', 'y axis')
        .attr("transform", "translate(" + w + ",0)")
        .call(yAxis);

    // Create Legends
    vis.append("rect")
        .attr('class', 'chartviz-legend-1')
        .attr("width", 10)
        .attr("height", 10);

    vis.append("text")
        .attr("x", 20)
        .attr("dy", ".9em")
        .text("Legend 1");

    vis.append("line")
        .attr("x1", 0)
        .attr("x2", w - x({
            x: .1
        }))
        .attr("y1", h)
        .attr("y2", h);

然后我添加了一个过渡按钮，从组图到堆栈图。

window.transitionGroup = function() {
    d3.select("#button-group").style("display", "none");
    d3.select("#button-stack").style("display", null);

    var group = d3.selectAll("#chartviz");

    group.selectAll("g.layer rect")
        .transition()
        .duration(500)
        .delay(function(d, i) {
            return (i % m) * 10;
        })
        .attr("x", function(d, i) {
            return x({
                x: .9 * ~~(i / m) / n
            });
        })
        .attr("width", x({
            x: .9 / n
        }))
        .each("end", transitionEnd);

    function transitionEnd() {
        d3.select(this)
            .transition()
            .duration(500)
            .attr("y", function(d) {
                return h - y2(d);
            })
            .attr("height", y2);
    }
}

window.transitionStack = function() {
    d3.select("#button-stack").style("display", "none");
    d3.select("#button-group").style("display", null);

    var stack = d3.select("#chartviz");

    stack.selectAll("g.layer rect")
        .transition()
        .duration(500)
        .delay(function(d, i) {
            return (i % m) * 10;
        })
        .attr("y", y1)
        .attr("height", function(d) {
            return y0(d) - y1(d);
        })
        .each("end", transitionEnd);

    function transitionEnd() {
        d3.select(this)
            .transition()
            .duration(500)
            .attr("x", 0)
            .attr("width", x({
                x: .9
            }));
    }
}

在我添加选项以选择标签后，这是我尝试做的以更改 json 文件:

$('#selectOptions').change(function() {
    var v = this.value;
    var jsondata = 'jsondata/' + v + '.json';
    console.log(jsondata);
    if (window.location.hash === '') {
        d3.json(jsondata, function(err, data) {
            createVis(data);
        });
    };
});

它有效，它改变了 json 文件，但是它重写了 x 和 y 轴、legend 和 bars 每次选择新选项时。

我怎样才能改进这个脚本。

如有任何建议，我们将不胜感激!谢谢!

Answer 1

在 creaeVis 函数中添加这一行:

d3.select('#chartviz').select("svg").remove();

//generate the svg
var vis = d3.select('#chartviz')
    .append('svg')
    .attr("width", w + 2.5 * p)
    .attr("height", h + p);

这将确保您始终只有一个 SVG，之前每次更改选择时您都会附加一个 SVG。