Question

我想要生成的图形是嵌套矩形，但是直接显示。我的部分代码是：

    _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];



}

我认为生成的rects元素没有错。结果html是：

 <!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>

，结果为result image

但是，在浏览器中运行它，只显示比7个更多的2个rects，换句话说，不显示子rects。怎么了？有人可以帮忙吗？

我想要实现的是图1 figure 1 and 2

以及关于图2实现的任何建议，例如，我应该使用什么布局（可能是Treemap？）或者只是图1中的相同方法？

为什么rect的subrect不能在d3.js中显示

0 个答案: