Question

我有一个树形图（简单），我想添加一个新元素（请参阅下面代码中的DS0和DS1）。我不想重新创建整个树形图，而是想要更新＆＃34;数据。粘性是假的更新部分调整g变换（OK）更新部分调整包含的矩形宽度/高度（不正常）

devmode off（chrome）rects宽度/高度未更新（看起来像d.x和d.y值是旧值 - 可以在cosnole.log语句中看到）
使用devmode on（chrome）＆＃39; debugger＆＃39;语句启动，如果我单步执行，一些宽度值会更新确定。

我无法理解为什么这不能正确更新，但我可以做一些观察。当新数据出现时，似乎没有调整绑定到<g>，<rect>和<text>元素的数据。当然，<text>数据仍然是旧的＆{39} ＃39;

也许唯一可行的方法是重新创建整个SVG？ diagrams

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Test Dynamic Treemap</title>
    <style>
rect {    fill: none; stroke: #fff;}
text {    font: 10px sans-serif;}
    </style>
<body>
<input type="button" id="add" value="add">
<input type="button" id="remove" value="remove">
<br>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    color = d3.scale.category20c();

var treemap = d3.layout.treemap()
        .padding([15,5,5,5])
        .size([width, height])
        .sticky(false)
        .value(function(d) { return 5; });

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
    .append("g")
        .attr("transform", "translate(-.5,-.5)");

var DS0 = 
{'name': 'data', 'children': [
    {'name':'A', 'children':[
        {'name':'A01' },
        {'name':'A02'}
    ]},
]}
var DS1 = 
{'name': 'data', 'children': [
    {'name':'A', 'children':[
        {'name':'A01' },
        {'name':'A02'},
        {'name':'A03'}
    ]},
]}
d3.select('#add').on('click',function() {withData(DS1)})
d3.select('#remove').on('click',function() {withData(DS0)})
withData(DS0);

function withData(json){
    var cell = svg.data([json]).selectAll("g")
            .data(treemap.nodes)

    // BEGIN UPDATE SECTION
    var updates = cell.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    // adjust the parameters of the updated objects
    updates.selectAll("rect") // These only seem to use 'new' data when stepped through in debugger
                              // ======================================================================
                .attr("width", function(d) { debugger; console.log(d.name + ' setting width to ' + d.dx); return d.dx; })
                .attr("height", function(d) { debugger; console.log(d.name + ' setting height to ' + d.dy); return d.dy; })
                .style("fill", function(d) { return d.children ? color(d.name) : "yellow"; })
    // END UPDATE SECTION

    // BEGIN ENTER SECTION (ADDS)
    var adds = cell.enter().append("g")
            .attr("class", function(d) {return "cell " + d.name})
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    adds.append("rect")
                .attr("width", function(d) { return d.dx; })
                .attr("height", function(d) { return d.dy; })
                .style("fill", function(d) { return d.children ? color(d.name) : null; })
    adds.append("text")
            .attr("x", function(d) { return d.dx / 2; })
            .attr("y", function(d) { return 5; })
            .attr("dy", ".35em")
            .attr("text-anchor", "top")
            .text(function(d) { return d.children ? d.name : d.name; });
    // END ENTER SECTION (ADDS)

    // BEGIN UPDATE AND ENTER SECTION (Updates And ADDS)
        //var updatesAndAdds = cell.attr("transform", function(d) { console.log("UpdateAndUpdate:" + d.name); return "translate(" + d.x + "," + d.y + ")"; });
    // END UPDATE AND ENTER SECTION (Updates And ADDS)

    // BEGIN EXIT SECTION (Updates And ADDS)
    var rems = cell.exit().remove();
    // END EXIT SECTION (Updates And ADDS)

};

</script>

Answer 1

此代码：

var adds = cell.enter().append("g")
  ...
adds.append("text")
  .attr("x", function(d) { return d.dx / 2; })
  .attr("y", function(d) { return 5; })

表示您仅处理文本元素的输入选择。上面的代码：

updates.selectAll("rect")

正在处理rects的更新选择（你需要类似于文本元素的东西）。

让我们退后一步，尝试清理一下（未经测试的代码）：

////////////
// this is the entire selection
/////////////
var cell = svg.data([json]).selectAll("g")
        .data(treemap.nodes);

/////////////
// remove is easy, get it out of the way
/////////////
cell.exit().remove();

/////////////
// do all the entering first
////////////
// enter the gs
var eCell = cell.enter().append("g")
  .attr("class", function(d) {return "cell " + d.name});    
// and rect for that g
eCell.append("rect")
   .style("fill", function(d) { return d.children ? color(d.name) : null; });
// and a text for that g
eCell.append("text")
  .attr("y", function(d) { return 5; })
  .attr("dy", ".35em")
  .attr("text-anchor", "top");

/////////////
// now do all the updating, this is enter + update
////////////
// move the g
cell.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
// resize/move the rect
cell.select("rect")
  .attr("width", function(d) { debugger; console.log(d.name + ' setting width to ' + d.dx); return d.dx; })
  .attr("height", function(d) { debugger; console.log(d.name + ' setting height to ' + d.dy); return d.dy; });
 // move the text and update value
cell.select("text")
  .attr("x", function(d) { return d.dx / 2; })
  .text(function(d) { return d.children ? d.name : d.name; });

d3 treemap动态数据不调整单元格宽度/高度

1 个答案: