Question

我正在通过RUN了解JavaScript。

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

我做了：

我创建了一个d3.js图表。
我向d3.js id。
我从select添加了var v = this.value;到options

我得到的结果更改了数据集，但是它反复写入d3.json和x + y axis。

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

在我添加了选择标签的选项之后，这就是我为了更改json文件而尝试做的事情：

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); }); }; });和x，y axis和legend。

如何改进此脚本。

任何建议表示赞赏！谢谢！

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。

Answer 2

以下方法可能适用于您的应用。

使用ajax call
将JSON数据传递给函数以呈现图形
每次使用新的JSON数据集创建图表。

使用ajax调用作为图形的馈送器

functional approach d3.v4 bar chart

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

2 个答案: