Question

我有一个交互式d3条形图（条形图是可拖动的），带有相关的HTML表格，让我了解被绘制的基础数据。我有一个重置按钮，应该在用户使用它之后将图表数据重置为其原始状态。我无法弄清楚为什么HTML表格正确地重置而图表没有。我认为这与我对d3的输入（）/更新（）的误解有关，但就我的知识而言，这是我的意思。

完整演示位于http://jsfiddle.net/HHLrF/，但这是相关代码：

d3.json("data/tax_stacked.json", function(error, data) {

var mydata = clone(data);  // Use a copy of the data to store user's preference.
var desc = function (a,b) { return d3.descending(+a.value, +b.value);}
mydata.sort(desc);
x.domain([0, d3.max(mydata, function(d) { return +d.value * 1.1; })]);
y.domain(mydata.map(function(d) { return d.name; }));
var defs = chart.insert("defs",".tax");
drawchart();

d3.select("button").on("click",function () {
    mydata = clone(data);
    mydata.sort(desc);
    drawchart();
});

function drawtable() {
    console.log("drawing table...");
    var columns = ["name", "value"];

    var table = d3.select("#grid");
            table.html("");
    var thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(mydata)
        .enter()
        .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .text(function(d) { return d.value; }); 
}

function drawchart() {

        var drag = d3.behavior.drag()
        .on("dragstart", function(){
                    var where;
                    d3.select(this).classed({"bar": true, "moved": true});
        })
        .on("drag", function(d){
            where = d3.event.x;
            d3.select(this)
                .attr("width", where);
            d3.select(this.nextSibling)                             // Move the label
                .attr("x", where + 10);

/* Some lines omitted here for brevity */

            d.value = parseInt(x.invert(where));
            drawtable();
        })
        .on("dragend", function(d){
            });


      var taxes = chart.selectAll(".tax")
          .data(mydata)
        .enter()
            .append("g")
            .classed("tax", true);

    // Clipping paths to swap colours when the user's figures exceed original figures (work in progress!)       
        defs.selectAll(".cp")
                .data(mydata)
                .enter()
                .append("clipPath")
          .attr("id", function (d,i) { return "cp" + i; })
          .append("rect")
          .attr("x", function(d) { return x(d.value); })
          .attr("y", function(d) { return y(d.name); })
          .attr("width", function(d) { return width - x(d.value); })
          .attr("height", y.rangeBand());

    // Light blue bars for the original budget figures
      taxes.append("rect")
          .classed("original", true)
          .attr("x", function(d) { return x(0); })
          .attr("y", function(d) { return y(d.name); })
          .attr("width", function(d) { return x(d.value); })
          .attr("height", y.rangeBand())
          .attr("rx",0);

    // Medium blue bars for the user's budget figures
      taxes.append("rect")
          .attr("class", function (d) { return (d.fixed == "y") ? "fixed" : "bar"; })
          .attr("x", function(d) { return x(0); })
          .attr("y", function(d) { return y(d.name)+1; })
          .attr("width", function(d) { return x(d.value); })
          .attr("height", y.rangeBand()-1)
          .attr("rx",0)
          .attr("title", function (d) { return d.value; })
          .attr("clipper", function (d,i) { return "url(#cp" + i + ")"; });
    //      .attr("clip-path", function (d,i) { return "url(#cp" + i + ")"; });

      taxes.append("text")
          .attr("class", "label")
          .attr("x", function(d) { return x(d.value)+10; })
          .attr("y", function(d) { return y(d.name); })
          .attr("dy", "1.6em")
          .text( function (d) { return d.name; });

        var iconptr = taxes.append("g")
            .classed("smooth", true)
            .attr("transform", function (d) {
                    return "translate(" + (x(d.value)+labelpadding+parseInt(this.previousSibling.getBBox().width)) + "," + (y(d.name)+7) + ") scale(0.037,0.037)";
            });

/* Some lines omitted here for brevity */

    // Draw the axes
      chart.append("g")
          .attr("class", "x axis")
          .call(xAxis);

      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis);

        d3.selectAll(".bar").call(drag);
        drawtable();
    }

}）;

Answer 1

当前实施中存在几个问题：

每次单击重置按钮时都会追加两个轴
单击重置按钮后图表未更新
单击重置按钮后表更新无效

可以说有很多，但关注几个要点，你的图表没有更新，因为你怀疑，输入/更新选择没有得到正确处理。您可以在输入选择中执行所有操作，因为您没有键入数据（例如按值），也没有添加/删除元素，所以在启动时构建图表后，输入选择中将没有任何内容。我已经解决了这个问题，并在适当的地方发表了评论。

我还修复了轴重复，并在用户使用图表并单击重命名的重绘按钮后对其进行适当刷新。为什么要重命名按钮？基本上，您使用的克隆技术并没有真正起作用。您可以进一步调查，但为方便起见，我删除了每次提及的克隆数据，并仅对原始数据进行操作。所以，不，原始数据没有被重新设置，但是当用户与图表交互时，以下内容正在工作：

表格更新有效（包括排序）
图表更新有效（包括排序）

x轴更新并反映新的数据量值

// preserve the enter selection in a variable for re-use!!!
var taxesEnter = taxes
  .enter()
  .append("g")
    .classed("tax", true);

使用修正程序完成FIDDLE。

所以，这不是你想要的重新设置（再次，调查克隆情况），但它有各种有用的部分。在这种程度上，我希望它对你有用。

Answer 2

万岁！它现在起作用，因为更好地理解“更新”和输入（）。更新的小提琴是http://jsfiddle.net/HHLrF/3/或在下面阅读。除了@FernOfTheAndes的帮助，我发现http://bl.ocks.org/mbostock/3808218很有帮助。

d3.json("data/tax_stacked.json", function(error, data) {

var mydata = clone(data);  // Use a copy of the data to store user's preference.
var desc = function (a,b) { return d3.descending(+a.value, +b.value);}
mydata.sort(desc);
x.domain([0, d3.max(mydata, function(d) { return +d.value * 1.1; })]);
y.domain(mydata.map(function(d) { return d.name; }));
var defs = chart.append("defs");

// Draw the axes
chart.append("g")
 .attr("class", "x axis");

chart.append("g")
 .attr("class", "y axis");

drawchart();
drawtable();

d3.select("button").on("click",function () {
    mydata = clone(data);
    mydata.sort(desc);
        d3.selectAll("rect.bar")
        .data(mydata)  // We're rebinding at this level rather than taxes level because the reset value is not propagating down to the <rect class="bar moved"> by itself.
      .attr("width", function(d) { console.log(x(d.value)); return x(d.value); });      
    drawtable();
});

function drawtable() {
// From http://stackoverflow.com/questions/9268645/creating-a-table-linked-to-a-csv-file
    var columns = ["name", "value"];

    var table = d3.select("#grid");
            table.html("");
    var thead = table.append("thead"),
        tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
        .data(mydata)
        .enter()
        .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function(row) {
            return columns.map(function(column) {
                return {column: column, value: row[column]};
            });
        })
        .enter()
        .append("td")
            .text(function(d) { return d.value; }); 
}

function drawchart() {

        var drag = d3.behavior.drag()
        .on("dragstart", function(){
                    var where;
                    d3.select(this).classed({"bar": true, "moved": true});
        })
        .on("drag", function(d){
            where = d3.event.x;
            d3.select(this)
                .attr("width", where);
                    d.value = "" + parseInt(x.invert(where));
            drawtable();
        })
        .on("dragend", function(d){
            });

        var taxes = chart.selectAll(".tax")
          .data(mydata);

      var taxenter = taxes.enter()
            .append("g")
            .classed("tax", true);

    // Light blue bars for the original budget figures
      taxenter.append("rect")
          .classed("original", true)
          .attr("x", function(d) { return x(0); })
          .attr("y", function(d) { return y(d.name); })
          .attr("width", function(d) { return x(d.value); })
          .attr("height", y.rangeBand())
          .attr("rx",0);

    // Medium blue bars for the user's budget figures
      taxenter.append("rect")
          .attr("class", function (d) { return (d.fixed == "y") ? "fixed" : "bar"; })
          .attr("x", function(d) { return x(0); })
          .attr("y", function(d) { return y(d.name)+1; })
                .attr("width", function(d) { return x(d.value); })
          .attr("height", y.rangeBand()-1)
          .attr("rx",0)
          .attr("title", function (d) { return d.value; });

    // Draw the axes
      chart.selectAll(".x")
          .call(xAxis);

      chart.select(".y")
          .call(yAxis);

    // Enable dragging

      d3.selectAll(".bar").call(drag);

    }

});

将d3条形图重置为原始数据源时，重复的轴节点

2 个答案: