Question

我正在制作一个条形图，但我无法解决它的辅助功能;使用辅助数据更新。

我将带有来自2个独立数组的主要数据的条形成为这样的数组;

labes = [label1, label2];
primarydata = [1,2]

data = [];
data = $.map(labels, function(v, i) {

                return [[" " + v, " " + primaryData[i]]];

             });

给出输出：

[["label1", "1"], ["label2", "2"]]

然后我将数据插入到d3条形图中。

var svg = d3.select($(svgobject).get(0)),
                margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = $(svgobject).width() - margin.left - margin.right,
                height = +svg.attr("height") - margin.top - margin.bottom;

            var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
                y = d3.scaleLinear().rangeRound([height, 0]),
                y1 = d3.scaleLinear().rangeRound([height, 0]);

            var g = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            x.domain(data.map(function (d) {
                return d[0];
            }));


            y.domain([0, d3.max(data, function (d) {
                // parseInt needed here, or the scaling is wrong. Still scales though for some reason
                return parseInt(d[1]);
            })]);

// Inserts the x-axis line text
            g.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + (height) + ")")
                .call(d3.axisBottom(x))
                .selectAll("text")
                .attr("y", 0)
                .attr("x", 8)
                .attr("dy", "1.75em")
                .attr("transform", "rotate(340)")
                .style("text-anchor", "end");

            // Inserts the y-axis line
            // d3.format(".2s"), formats the line fx from 1300 to 1.3 thousand
            g.append("g")
                .attr("class", "axis axis--y")
                .call(d3.axisLeft(y).ticks(10).tickFormat(d3.format("2.2s")))
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0 - margin.left)
                .attr("x", 0 - (height / 2))
                .attr("dy", "0.71em")
                .attr("text-anchor", "end");

            // Insert all the bars
            g.selectAll(".bar")
                .data(data)
                .enter().append("rect")
                .attr("class", "bar")
                .attr("x", function (d) {
                    return x(d[0]);
                })
                .attr("y", function (d) {
                    return y(d[1]);
                })
                .attr("width", x.bandwidth())
                .attr("height", function (d) {
                    return height - y(d[1]);
                });

这会产生条形图

但是我想按下一个像这样的可比较数据的按钮;

secondaryData = [];

data = primaryData.concat(secondaryData).map(function(a, i) {
                 return [labels[i % 2], a.toString()];
             });

然后我不知道如何继续。我的栏甚至没有显示包含主要和辅助数据的阵列中的完整数据。如何插入secondaryData但区分它？所以我可以采用不同的方式。

我也试过让y1从d [2]中获取数据，但是没有这样做。

来自多个阵列的d3条形图

0 个答案: