首页 > 解决方案 > 自定义多条形图?

问题描述

我有一个多条形图,需要以关键数据的每个条形需要拆分为两个条形的方式进行自定义。渲染后,我删除了矩形并添加了新的多个矩形。现在,问题是如何绑定这些数据?似乎工具提示不起作用,因为数据已被删除。 http://plnkr.co/edit/C0ZXulGAa21PbjURbcug?p=preview

d3.selectAll('.nv-group')[0].forEach(function (d, i) {
            var group = d3.select(d);
            group.selectAll('rect')[0].forEach(function(data){
                var rect = d3.select(data);
                var x = rect.attr('x');
                var y = rect.attr('y');
                var tr = rect.attr('transform');
                var h = rect.attr('height');
                var w = rect.attr('width');
                var fill = rect.style('fill');
                var stroke = rect.style('stroke');
                var d = rect.data();
                rect.remove();
                group.data(d).append('rect').attr('class', 'nv-bar positive')
                    .attr("x", x).attr('y', y).attr('transform', tr).attr('height', h).attr('width', w)
                    .style('fill', fill).style('stroke', stroke);
                group.data(d).append('rect').attr('class', 'nv-bar positive')
                    .attr("x", x).attr('y', y).attr('transform', tr).attr('height', h/2).attr('width', w)
                    .style('fill', 'white').style('stroke', stroke);

            });




        });

标签: angularjsd3.jsnvd3.js

解决方案


推荐阅读