D3.js填充画笔选择

时间:2014-06-23 15:20:47

标签: javascript jquery html css d3.js

我创建了一个带有D3.js的散点图,它将根据加载的数据缩放轴和点的大小,这意味着数据的比例和点的大小可以从图表到图表的变化很大。我试图使用画笔选择来选择图表上的区域,其区域位于画笔选择范围之下(而不仅仅是数据点的绝对x-y位置)。因此,实质上,在同一位置给定两个点,半径较大的点将更容易选择。我不太确定在执行画笔选择时如何考虑点的像素填充。如何将点填充的已知像素值缩放为可在评估我的选择时使用的图表值?

这是我的画笔定义:

var brush = svg.append("g")
        .datum(function() { return {selected: false}; })
        .attr("class", "brush")
        .call(d3.svg.brush()
            .x(x)
            .y(y)
            .on("brushstart", function(d) {
                selectedNodes = {};
            })
            .on("brush", function() {
                var extent = d3.event.target.extent();
                dot.classed("selected", function(d) {
                    if (extent[0][0] <= d.x 
                        && d.x <= extent[1][0] 
                        && extent[0][1] <= d.y
                        && d.y <= extent[1][1])
                    {
                        return d.selected = true; 
                    } else {
                        return d.selected = false; 
                    }
                });
            })
            .on("brushend", function() {
                d3.select(this).call(d3.event.target);
            }));

点定义:

var dot = svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("r", function(d,i) { return d.r; }) 
        .attr("cx", function (d, i) {
            return x(d.x);
        })
        .attr("cy", function (d) {
            return y(d.y);
        });

0 个答案:

没有答案