Question

我正在尝试构建一个条形图，我可以根据特定的时间长度在显示的数据量之间切换。到目前为止，我所拥有的代码就是这个，

var margin = {
    top : 20,
    right : 20,
    bottom : 30,
    left : 50
}, width = 960 - margin.left - margin.right, height = 500
        - margin.top - margin.bottom;


var barGraph = function(json_data, type) {

if (type === 'month')
    var barData = monthToArray(json_data);
else 
    var barData = dateToArray(json_data);


    var y = d3.scale.linear().domain([ 0, Math.round(Math.max.apply(null,
            Object.keys(barData).map(function(e) {
                return barData[e]['Count']}))/100)*100 + 100]).range(
            [ height, 0 ]);

    var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .1)
            .domain(d3.entries(barData).map(function(d) {
                return barData[d.key].Date;
            }));

    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("left");

    var svg = d3.select("#chart").append("svg").attr("width",
            width + margin.left + margin.right).attr("height",
            height + margin.top + margin.bottom).append("g").attr(
            "transform",
            "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g").attr("class", "x axis").attr("transform",
            "translate(0," + height + ")").call(xAxis);

    svg.append("g").attr("class", "y axis").call(yAxis).append(
            "text").attr("transform", "rotate(-90)").attr("y", 6)
            .attr("dy", ".71em").style("text-anchor", "end").text(
                    "Total Hits");

    svg.selectAll(".barComplete").data(d3.entries(barData)).enter()
            .append("rect").attr("class", "barComplete").attr("x",
                    function(d) {
                        return x(barData[d.key].Date)
                    }).attr("width", x.rangeBand() / 2).attr("y",
                    function(d) {
                        return y(barData[d.key].Count);
                    }).attr("height", function(d) {
                return height - y(barData[d.key].Count);
            }).style("fill", "orange");

    var bar = svg.selectAll(".barHits").data(d3.entries(barData))
            .enter().append("rect").attr("class", "barHits").attr(
                    "x", function(d) {
                        return x(barData[d.key].Date) + x.rangeBand() / 2
                    }).attr("width", x.rangeBand() / 2).attr("y",
                    function(d) {
                        return y(barData[d.key].Count);
                    }).attr("height", function(d) {
                return height - y(barData[d.key].Count);
            }).style("fill", "red");
};

这显示我的原始数据集非常出色，我设置了一个按钮，可以在页面开头绘制的数据集之间切换。所有的数组都存在，但无论我怎么努力，我都会继续向div添加一个新的图形，所以在按钮点击后我有两个图形，我尝试使用enter（）退出替换div中的所有代码（）remove（）函数但是在使用这些时我得到一个错误，说明没有exit（）函数我通过跟随其他人发布了here和另一个here的帖子得到了这个但是没有无济于事。任何想法的家伙？

Answer 1

你最有可能做的是每次点击按钮时可能会使用新的div绘制一个新图表，你可以尝试做的一件事就是在某处保留图表容器元素，当单击按钮，您只需清除它的子项并重新绘制图形。

Answer 2

在实践中，我几乎从不链接.data()和.enter()。

// This is the syntax I prefer:
var join  = svg.selectAll('rect').data(data)
var enter = join.enter()

/* For reference: */

// Selects all rects currently on the page
// @returns: selection
svg.selectAll('rect') 

// Same as above but overwrites data of existing elements
// @returns: update selection
svg.selectAll('rect').data(data) 

// Same as above, but now you can add rectangles not on the page
// @returns: enter selection
svg.selectAll('rect').data(data).enter()

同样重要的是：

# selection.enter（）

当您追加或插入时，回车选择会合并到更新选择中。

Answer 3

好的，我想通了所以我会首先将你的所有注意力都集中在here我找到答案的地方。关键在于我绘制svg元素的方式，而不是用新图形替换它我只是不断地绘制一个新的并将其附加到#chart div。我找到了我指示你们的答案，并在我现有的barGraph函数的开头添加了这一行。

d3.select("#barChart").select("svg").remove();

它就像一个魅力，像我想象的那样来回切换图形，现在我还有一些条形图本身的任务，我可以继续进行另一个项目。

谢谢大家的帮助，也许有一天我会回报你的帮助！

如何在D3JS中创建更新功能

3 个答案: