Question

全新的D3.js和该死的什么是学习曲线......

下面是我的页面加载原始静态数据时的图表。从图中可以看出，列从左到右依次上升。

enter image description here

我将D3代码放在Backbone视图中。该程序的目标是在设定的时间间隔内更改值。当值发生变化时，我想使用D3的transform方面来根据数字向上或向下移动列。

但是，我希望它们都能根据适用于每列的y轴上下移动。相反，似乎每列根据不同的y轴上下移动数字，并且每次迭代时每列都会发生变化。例如，如果生成值188000，则值为115311的列可能会向下移动，然后再向上移动值为112000.

例如，以下是创建第二次数字迭代后的列（另请注意，作为列的rect元素未被重新绘制。如果有人知道为什么会发生这种情况也非常感谢）

enter image description here

模型

var DataPoint = Backbone.Model.extend({

    initialize: function (lbl, ctrct, rtrn) {
        this.set({
            label: lbl,
            contract: ctrct,
            annReturn: rtrn
        })
    },

    randomize: function () {
        this.set({
            contract: (Math.random() * (140000 - 100000 + 1) + 100000).toFixed(2)
        });
    }
});

集合

var DataSeries = Backbone.Collection.extend({

    model: DataPoint,

    fetch: function () {
        this.reset();
        this.add([
            new DataPoint("1/7yrs", "111830.17", "1.63%"),
            new DataPoint("2/7yrs", "115311.17", "2.07%"),
            new DataPoint("3/7yrs", "118984.65", "2.52%"),
            new DataPoint("4/7yrs", "122859.65", "2.98%"),
            new DataPoint("5/7yrs", "126947.77", "3.46%"),
            new DataPoint("6/7yrs", "131260.74", "3.94%"),
            new DataPoint("7/7yrs", "135810.92", "4.44%")
        ])
    },

    randomize: function () {
        this.each(function (m) {
            m.randomize();
        });
    }
});

查看

var BarGraph = Backbone.View.extend({

    "el": "#graph",

    options: {barDemo: ""},

    initialize: function (options) {

        _.bindAll(this, "render", "frame");
        this.collection.bind("change", this.render);
        this.options.barDemo = d3.selectAll($(this.el)).append("svg:svg")
            .attr("width", width)
            .attr("height", height + 60);
        this.collection.fetch();
    },

    render: function () {
        var data = this.collection.models;
        var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
        var y = d3.scale.linear().domain([0, d3.max(data, function (d) {
            console.log(d);
            console.log();
             return d.attributes.contract
        })])
            .rangeRound([0, height]);

        this.options.barDemo.selectAll("rect")
            .data(data)
            .enter()
            .append("svg:rect")
            .attr("x", function (d, i) {
                //console.log(x(i));
                 return x(i);
            })
            .attr("y", function (d) {
                //console.log(height - y(d.attributes.contract));
                return height - y(d.attributes.contract);
            })
            .attr("height", function (d) {
                console.log(y(d.attributes.contract));
                return y(d.attributes.contract);
            })
            .attr("width", barWidth)
            .attr("fill", "#2d578b");

        this.options.barDemo.selectAll("text")
            .data(data)
            .enter()
            .append("svg:text")
            .attr("x", function (d, i) {
                //console.log(x(i) + barWidth);
                 return x(i) + barWidth;
            })
            .attr("y", function (d) {
                return height - y(d.attributes.contract);
            })
            .attr("dx", -barWidth / 2)
            .attr("dy", "1.2em")
            .attr("text-anchor", "middle")
            .text(function(d) {
                //console.log(d.contract);
                return d.attributes.contract
            })
            .attr("fill", "white");

        this.options.barDemo.selectAll("text.yAxis")
            .data(data)
            .enter().append("svg:text")
            .attr("x", function (d, i) { return x(i) + barWidth; })
            .attr("y", height)
            .attr("dx", -barWidth / 2)
            .attr("dy", "15px")
            .attr("text-anchor", "middle")
            .attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
            .text(function (d) { return d.label; })
            .attr("transform", "translate(0, 18)")
            .attr("class", "yAxis");

        var rect = this.options.barDemo.selectAll("rect").data(data, function (d, i) { return i; });

        rect.enter().insert("rect", "text").attr("x", function (d, i) {
            return x(i);
        }).attr("height", function (d) {
            return x(d.attributes.contract);
        }).attr("width", barWidth);

        rect.transition().duration(1000).attr("height", function (d) {
            return x(d.attributes.contract);
        }).attr("width", barWidth);

        rect.exit().remove();

        var text = this.options.barDemo.selectAll("text").data(data, function (d, i) {
            return i;
        });

        text.enter().append("text")
            .attr("x", function (d, i) { return x(i) + barWidth; })
            .attr("y", function (d) { return height - y(d.attributes.contract); })
            .attr("dx", -barWidth / 2)
            .attr("dy", "1.2em")
            .attr("text-anchor", "middle")
            .text(function (d) { return d.attributes.contract })
            .attr("fill", "white");

        text
        .transition()
        .duration(1100)
        .attr("y", function (d) {
            return y(d.attributes.contract);
        })
         .text(function (d) { return d.attributes.contract; });

    },

    frame: function () {
        //this.chart.append("line").attr("y1", 0).attr("y2", h - 10).style("stroke", "#000");

        //this.chart.append("line").attr("x1", 0).attr("x2", w).attr("y1", h - 10).attr("y2", h - 10).style("stroke", "#000");
    }
});

启动代码

$(function() {
    var dataSeries = new DataSeries();
    new BarGraph({
        collection: dataSeries
    }).render();

    setInterval(function () {
        dataSeries.randomize();
    }, 2000);
});

Answer 1

以下是最终修复我的render功能的代码。我需要在更改和选择y时调整height和rect属性，主要是在其他几个小的更改中。

render: function () {
        var data = this.collection.models;
        var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
        var y = d3.scale.linear().domain([100000, 140000]).range([height, 0]);

        this.options.barDemo.selectAll("rect")
            .data(data)
            .enter()
            .append("svg:rect")
            .attr("x", function (d, i) { return x(i); })
            .attr("y", function (d) { return y(d.attributes.contract); })
            .attr("height", function (d) { return height - y(d.attributes.contract); })
            .attr("width", barWidth)
            .attr("fill", "#2d578b");

        this.options.barDemo.selectAll("text")
            .data(data)
            .enter()
            .append("svg:text")
            .attr("x", function (d, i) { return x(i) + barWidth; })
            .attr("y", function (d) { return y(d.attributes.contract); })
            .attr("dx", -barWidth / 2)
            .attr("dy", "1.2em")
            .attr("text-anchor", "middle")
            .text(function(d) { return d.attributes.contract; })
            .attr("fill", "white");

        this.options.barDemo.selectAll("text.yAxis")
            .data(data)
            .enter().append("svg:text")
            .attr("x", function (d, i) { return x(i) + barWidth; })
            .attr("y", height)
            .attr("dx", -barWidth / 2)
            .attr("dy", "15px")
            .attr("text-anchor", "middle")
            .attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
            .text(function (d) { return d.attributes.label; })
            .attr("transform", "translate(0, 18)")
            .attr("class", "yAxis");

        var rect = this.options.barDemo.selectAll("rect").data(data, function (d, i) { return i; });

        rect.enter().append("rect", "text").attr("x", function (d, i) {
            return x(i);
        }).attr("y", function (d) {
            return y(d.attributes.contract);
        }).attr("height", function (d) {
            return height - y(d.attributes.contract);
        }).attr("width", barWidth);

        rect.transition().duration(1000).attr("y", function(d) {
            return y(d.attributes.contract);
        }).attr("height", function (d) {
            return height - y(d.attributes.contract);
        }).attr("width", barWidth);

        rect.exit().remove();

        var text = this.options.barDemo.selectAll("text").data(data, function (d, i) {
            return i;
        });

        text
        .transition()
        .duration(1100)
        .attr("y", function (d) {
            return y(d.attributes.contract);
        })
         .text(function (d) {
             console.log("from transition");
             console.log(d);
              return d.attributes.contract;
         });
    },

D3.js没有相应地沿y轴对齐列值

1 个答案: