d3.js - 将选定的画笔调整为矩形的左右两侧

时间:2014-08-22 10:22:28

标签: d3.js

我刷过一组矩形(一系列矩形)。我需要做的是一旦刷过,我想选择矩形的开始和结束,而不管它是否被部分选中。需要在绘制画笔的地方选择整个矩形集。 目前我只能刷一次,如果我执行下面的代码则不会更进一步。 矩形的高度是15.我在这里缺少什么?

我发现只有当我添加以下内容时,我才能再刷一次: gbrush .attr(" X",baseval) .attr("宽度",endval);

我的代码:

var baseval, endval,selected,gbrush
//initial brush drawn
var brush = d3.svg.brush()
            .x(d3.scale.identity().domain([30, 290]))
            .y(d3.scale.identity().domain([0, height-50]))
            .on("brushstart", brushstart)
            .on("brush", brush)
            .on("brushend", brushed);

            gbrush=svg.append("g").call(brush);


            function brushed() 
            {
                var e = brush.extent(); 
                //get all the selected rectangles where brushed.
                selected = svg.selectAll("rect").filter(function(d) 
                {
                return d.x_axis <= e[1][0] && d.x_axis + d.width >= e[0][0] && d.y_axis <= e[1][1] && d.y_axis + d.height >= e[0][1];
                })
                gbrush.selectAll("rect")
                .attr("height",  15)
                .attr("y",10)
                //get the start and end point of the rectangle's x-axis where the brush is drawn
                baseval = selected[0][0].x.baseVal.value;
                endval = selected[0][selected[0].length-1].x.baseVal.value;


                gbrush.selectAll("rect")
                .attr("height",  15)
                .attr("y",10)
                .attr("x",baseval)
                .attr("width",endval);

                .....



            }


            function brushstart() 
            {
                //var e = brush.extent(); 
                //brush.extent = [100,100];
                gbrush.selectAll("rect")
                .attr("height",  15)
                .attr("y",10);

            }
            function brush() 
            {
                gbrush.selectAll("rect")
                .attr("height",  15)
                .attr("y",10);
            }

0 个答案:

没有答案