Javascript 为什么rect的subrect不能在d3.js中显示
我要生成的图形是嵌套的矩形，但子矩形无法显示。 我的部分代码是：Javascript 为什么rect的subrect不能在d3.js中显示,javascript,d3.js,svg,Javascript,D3.js,Svg,我要生成的图形是嵌套的矩形，但子矩形无法显示。 我的部分代码是： _chart.renderFeatureAxisInner = function(svg=_svg){ feature_name = svg.select('.Feat_0_name').text(); nest_data = d3.nest() .key(function(d){ return d[
_chart.renderFeatureAxisInner = function(svg=_svg){
feature_name = svg.select('.Feat_0_name').text();
nest_data = d3.nest()
.key(function(d){
return d[feature_name];
}).key(function(d){
return d['Label'];
}).entries(_chart._l1_inner_data);
var updateRect = svg.selectAll('#Feature_0')
.data(nest_data);
var enterRect = updateRect.enter();
var exitRect = updateRect.exit();
updateRect.append('g')
.attr('id',function(d_l0,i){
return 'Feature0_value_'+i;
})
.selectAll('rect')
.data(function(d_l0,i){
//console.log(i);
return d_l0.values;
}).enter() //nest_data[0].values
.append('rect');
var i_l0 = 0;
var offsety = 0;
var offsety_arr=[0];
updateRect.selectAll('rect')
.data(function(d_l0,i_l0){
//i_l0=i_l0;
offsety=0;
return d_l0.values;
}) //nest_data[0].values
//.append('rect')
.attr('id',function(d_l1,i_l1){
if(d_l1.values[0]['Sepal Length'] == '(4.296, 6.1]')
i_l0 = 0;
else i_l0 = 1;
return 'Feature0_v'+i_l0+'_'+i_l1;
})
.attr('stroke','black')
.attr('fill',function(d_l1,i_l1){
//nest_data[0].values[0]
return _colors[d_l1.key];
})
//.attr('stroke','blue')
.attr('width',function(d_l1,i_l1){
if(d_l1.values[0]['Sepal Length'] == '(4.296, 6.1]')
i_l0 = 0;
else i_l0 = 1;
return svg.select('.Feature0_value_'+i_l0)
.attr('width');
}).attr('height',function(d_l1,i_l1){
var h=_base_height * d_l1.values[0]['1'];
offsety_arr.push(h);
return h;
})
.attr('x',function(d_l1,i_l1){
//cls = d.values[0]['Sepal Length'];
if(d_l1.values[0]['Sepal Length'] == '(4.296, 6.1]')
i_l0 = 0;
else i_l0 = 1;
//console.log(i_l0);
return svg.select('.Feature0_value_'+i_l0)
.attr('x');
}).attr('y',function(d_l1,i_l1){
if(d_l1.values[0]['Sepal Length'] == '(4.296, 6.1]')
i_l0 = 0;
else i_l0 = 1;
offsety=offsety + offsety_arr.splice(0,1)[0];
console.log(offsety);
var basey=parseFloat(svg.select('.Feature0_value_0')
.attr('y'));
y=offsety+basey;
return y+'';
});
offsety_arr=[0];
}
<!DOCTYPE html>
<html>
<body>
<svg width="1200" height="500">
<path stroke-width="3px" stroke="red" class="baseline1" d="M187.5,100L187.5,400"></path>
<text dy="-1em" y="100" x="187.5" text-anchor="middle" font-size="12px" fill="white" class="Feat_0_name">Sepal Length</text>
<g class="Feature0_frame">
<rect height="60" width="94.999999995" y="190" x="140.0000000025" stroke="blue" fill-opacity="0.3" fill="none" class="Feature0_value_0" id="Feature_0">
<g id="Feature0_value_0">
<rect y="190" x="140.0000000025" height="31.57894737" width="94.999999995" fill="yellow" stroke="black" id="Feature0_v0_0"></rect>
<rect y="221.57894737" x="140.0000000025" height="21.473684208" width="94.999999995" fill="blue" stroke="black" id="Feature0_v0_1"></rect>
<rect y="243.052631578" x="140.0000000025" height="6.947368422" width="94.999999995" fill="red" stroke="black" id="Feature0_v0_2"></rect></g></rect>
<rect height="60" width="55.000000005" y="250" x="159.9999999975" stroke="blue" fill-opacity="0.3" fill="none" class="Feature0_value_1" id="Feature_0">
<g id="Feature0_value_1">
<rect y="250" x="159.9999999975" height="17.454545454" width="55.000000005" fill="blue" stroke="black" id="Feature0_v1_0"></rect>
<rect y="267.454545454" x="159.9999999975" height="42.545454546" width="55.000000005" fill="red" stroke="black" id="Feature0_v1_1"></rect></g></rect>
</g>
</svg>
</body>
</html>
萼片长度
还有关于图2实现的任何建议，例如，我应该使用什么布局（可能是Treemap？）或图1上的相同方法？您不能在SVG.ty中嵌套矩形，那么如何实现我的愿望？@Gerardo Furtado不嵌套就可以了。您不能在SVG中将a放入另一个。你能给我们展示一下你想要达到的目标吗？@labixiaoK这取决于“你想要什么”。这正是您的SVG，没有任何嵌套：