Question

使用d3 enter，update模式时，我看到了一些奇怪的变换行为。我创建了一个组（svg：g）的文本（svg：text）项。当我最初使用.enter.append('g').attr('transform',function(d){...translate...}创建组时，项目相对于SVG的顶部。但是，当我在窗口调整大小后更新组时，组相对于其最外面的容器。

我的数据是一组嵌套的对象（d3.nest）

var myData=[{
    key:f,
    values:[{
      group:f,
      text:'foo'
    }]
  },
  {
    key:b,
    values:[{
      group:'b',
      text:'bar'
    },{
      group:'b',
      text:'baz'
    }]
  }
.....
]

我的输入/更新模式是：

// EDIT Some JS to add shapes first
var shapeCont = d3.select('#shapesAtTheTop');
var shapes = shapeCont.selectAll('rect')
  .data([50,50]);
shapes.exit().remove();
shapes.enter().append('rect')
  .attr('width',function(d){return window.innerWidth*(d/100)})
  .attr('x', function(d,i){return i*window.innerWidth*(d/100)})
  .attr('y',0)
  .attr('height',95);
// END EDIT
// Now add the text
var textgroupLeft = window.width/50, textGrouptop = 100;
function translateGroup(datum, i){
  var x = textGroupLeft * i;
  var y = textGroupTop;
  return 'translate('+x+' '+y+')';
}
var textContainer = d3.select('g.textContainer');
var txtg = textContainer.selectAll('g').data(myData,function(d){return d.key;});
// UPDATE
txtg.attr('transform',translateGroup);
// REMOVE
txtg.exit().remove();
// NEW
txtg.enter().append('g')
  .classed('textGroup',true')
  .attr('transform',transelateGroup)

var txt = d3.selectAll('g.textGroup').selectAll('text')
  .data(function(d){retrun d.values;},
    function(dataum){return JSON.stringify(dataum);})
// REMOVE
.....
// UPDATE
.....
// NEW
.....

我的HTML / SVG是：

<svg>
  <g id="shapesAtTop">
  ..... add polygons with positions in the first 100px high ....
  </g>
  <g id="textBelow" class="textContainer">
  </g>
</svg>

是否切换坐标系？如果是，为什么？

Answer 1

很难看出你哪里出错了。您可以通过在HTML中明确定义SVG中#textBelow组的转换或使用D3以编程方式定义转换来解决此问题。一旦该组具有正确的垂直位置，就可以更容易地翻译任何嵌套对象。

您确定要应用的翻译的代码很难遵循。我建议使用d3 BandScale来处理从正在转换的对象的索引到像素值的映射。

下面的代码段使用D3 v4演示了这两个代码段。如果你需要使用以前版本的D3，那么比例的名称是不同的，你必须更加小心selection.enter（），因为你没有得到selection.merge（）方法。

var data = [{key:'a'}, {key:'b'}]
var width = 500 //px

update(data,width)
setTimeout(function (){update(data,200)}, 2000)

function update(data, width) {
  //create a band scale to assist with layout
  var scale = d3
    .scaleBand()
    .domain(d3.range(data.length))
    .range([0, width])
    // padding ratio of total width
    .padding(0.1);

  // append/modify shapes
  var shapeCont = d3.select("#shapesAtTop");
  var shapes = shapeCont.selectAll("rect").data(data);
  // remove any unused nodes
  shapes.exit().remove();
  // enter
  shapes.enter()
    // add new rectangles
    .append("rect")
    // merge selection with any existing nodes
    .merge(shapes)
    // set all rect attributes
    .attr("x", function(d, i) {
      return scale(i);
    })
    .attr("y", 0)
    .attr("height", 95)
    .attr("width", scale.bandwidth());

  //append/modify text group elements
  var textContainer = d3.select('#textBelow');
  var txtg = textContainer.selectAll('g')
    .data(data, function(d) {
      return d? d.key : this.id
    });
  // remove any unused nodes
  txtg.exit().remove()
  // enter
  txtg.enter()
    .append('g')
    .classed('textGroup', true)
    // add some text to new elements
    .call( function (g) { g.append('text').text('I am text')})
    // merge exisiting and new
    .merge(txtg)
    .attr('transform', function(d, i) {
      return 'translate(' + scale(i) + ')'
    })
}

svg {
  width: 100%;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<svg>
  <g id="shapesAtTop">
  </g>
  <g id="textBelow" class="textContainer" transform="translate(0,120)">
  </g>
</svg>

SVG翻译组在窗口上的定位使用d3调整大小

1 个答案: