Question

我知道使用SVG，DOM元素按照它们编码的顺序呈现，并且不支持z-index。我已经建立了这个图表（基于Swimlanes：http://bl.ocks.org/1962173），其中词语经常被rects覆盖，并且在DOM中查看，很多rects实际上是在我的文本之后呈现的，即使在我的代码中也是如此显然是最后一次。这是现场直播：

http://stanford.edu/~c0chran/cgi-bin/WordRiver/index.html

我渲染所有形状的代码（rects / labels）：

function display () {

 var rects, labels
, minExtent = brush.extent()[0]
, maxExtent = brush.extent()[1];
var extentWidth = maxExtent - minExtent;
if (extentWidth > max_extent_width)
  maxExtent = minExtent + max_extent_width;
if (extentWidth < min_extent_width)
  maxExtent = minExtent + min_extent_width;
var visItems = jsonData.filter(function (d) {return d.time_bin <= maxExtent && d.time_bin >= minExtent});
mini.select('.brush').call(brush.extent([minExtent, maxExtent])); 

x1.domain([minExtent, maxExtent]);

if ((maxExtent - minExtent) > 5) {
xDateAxis.ticks(10);
}
else if ((maxExtent - minExtent) > 10) {
xDateAxis.ticks(20);
}
else {
xDateAxis.ticks(5);
}

// update the axis

main.select('.main.axis').call(xDateAxis)
.selectAll('text')
  .attr('dx', 5)
  .attr('dy', 12);

// upate the item rects
rects = itemRects.selectAll('rect')
.data(visItems, function (d,i) { return i; })
.attr('x', function(d) { return x1(d.time_bin); })
.attr('y', function(d) { return y1(d.dist_bin) + .1 * y1(1) + 0.5; })
.attr('width', 165)
.call(updateText);

rects.enter().append('svg:rect')
.attr('x', function(d) { return x1(d.time_bin); })
.attr('y', function(d) { return y1(d.dist_bin) + .1 * y1(1) + 0.5; })
.attr('width', 165)
.attr('class','borderMe')    
.attr('height', function(d) { return .8 * y1(1); })
.style('fill', function(d) {            
    var b = Math.round(colorScale(d.positivity));
    return "rgb(25,50," + b + ")";
})
.call(updateText);

rects.exit().remove();

// update the item labels
function updateText() {
console.log('hello!');
labels = itemRects.selectAll('text')
.data(visItems, function (d) { return d.word; })
.text(function (d) { return d.word; })
.attr('x', function(d) { 
    return Math.round(x1(d.time_bin+0.1)); 
})
.attr('y', function(d) { return y1(d.dist_bin) + .6 * y1(1)})
.attr('id','hover');
}
labels.enter().append('svg:text')
.text(function (d) { return d.word; })
.attr('x', function(d) { 
    return Math.round(x1(d.time_bin+0.1)); 
})
.attr('y', function(d) { return y1(d.dist_bin) + .6 * y1(1) })
.attr('text-anchor', 'start')
.attr('class', 'itemLabel')
.attr('id','hover')
.style('kerning',function(d) {
    if (typeFaceScale(d.objectivity) < 1) {
        return 0.5;
    }
})
.style('font-family', function(d) { // add more if/else to ammend objectivity texts
    if (typeFaceScale(d.objectivity) < 1) {
     return 'Impact';
    }
    else if(typeFaceScale(d.objectivity) > 2) {
        return 'Times New Roman'
    }
    else {return 'Rockwell'}
})
.style('font-size',function(d) {
    if (d.word.length >= 8 && wordSizeScale(d.frequency)>=16) { 
        return 16;
    }
    if ((maxExtent - minExtent) <= 5) {
        return Math.round(wordSizeScale(d.frequency))
    }
    else {
        return Math.round(wordSizeScale(d.frequency)- extentSizeScale(maxExtent-minExtent));
    }
})
.style('fill','white');
labels.exit().remove();

};

D3 - SVG Rects渲染文本后，覆盖文本

0 个答案: