d3.js - D3 二维刷不可滑动

Question

我在下面的较小图形中制作了一个带有二维画笔的散点图。这使用户能够动态查看完整图形的子区域。但是，当我绘制区域画笔时，它不再是“可移动的”，因为不能像一维画笔那样用鼠标移动画笔。有 2D 示例，其中 2D 画笔区域可以四处移动(例如 http://bl.ocks.org/mbostock/4343214)，并且创建 2D 画笔的代码实际上与 1D 相同。

我的问题是为什么添加第二个维度会消除移动画笔的能力？

这是我的代码(其中外部文件只是日期和销售价格的 csv):

  var margin = {top: 25, right: 10, bottom: 200, left: 75},
  margin2 = {top:350, right: 10, bottom: 30, left: 75}, 
  width = 960 - margin.left - margin.right, 
  height = 500 - margin.top - margin.bottom,
  height2 = 500 - margin2.top - margin2.bottom; 

  var parseDate = d3.time.format("%d-%b-%y").parse,
  commasFormatter = d3.format(",.0f"); 

  var x = d3.time.scale().range([0, width]),
  x2 = d3.time.scale().range([0, width]),
  y = d3.scale.linear().range([height, 0]), 
  y2 = d3.scale.linear().range([height2, 0]);

  var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height,0,0), 
  xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
  yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d) { return "$" +         commasFormatter(d); }).tickSize(-width,0,0),
  yAxis2 = d3.svg.axis().scale(y2).orient("left").tickFormat(function(d) { return "$" + commasFormatter(d); });

  var brush = d3.svg.brush() 
                .x(x2)
                .y(y2)
                .on("brush", brushed);

  var svg = d3.select("body")
        .append("svg")                                    
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

   svg.append("defs").append("clipPath")   //defines clipping mask around large graph
      .attr("id","clip")
      .append("rect")                      //mask shape is rectangle
        .attr("width", width)              //mask width is drawable width of large graph
        .attr("height", height);           //mask height is drawable height of large graph

  var largeGraph = svg.append("g")
             .attr("transform","translate("+margin.left+","+margin.top+")");

  var xBrushGraph = svg.append("g")
               .attr("transform", "translate("+margin2.left+","+margin2.top+")");

//BRING IN THE INITIAL DATA
d3.csv("6MonthPracticeData.csv", function(error, data) {
 data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price; 
    });

x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
y.domain([0, d3.max(data.map(function(d) { return d.price; }))]); 
x2.domain(x.domain());
y2.domain(y.domain());

largeGraph.append("g").attr("class","dot")
          .selectAll("circle")
          .data(data).enter()
          .append("circle")
          .attr("cx", function(d) { return x(d.date); })
          .attr("cy", function(d) { return y(d.price); })
          .attr("r",5)
          .attr("clip-path", "url(#clip)");

largeGraph.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis); 

largeGraph.append("g")
   .attr("class", "y axis")
   .call(yAxis);

largeGraph.append("text")
   .attr("transform", "rotate(-90)")
   .attr("y",0 - margin.left)
   .attr("x", 0 - (height/2))
   .attr("dy", "1em")
   .style("text-anchor", "middle")
   .text("Sale Price");

xBrushGraph.append("g").attr("class","smalldot")
          .selectAll("circle")
          .data(data).enter()
          .append("circle")
          .attr("cx", function(d) { return x2(d.date); })
          .attr("cy", function(d) { return y2(d.price); })
          .attr("r",2.5);

xBrushGraph.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0,"+height2+")")
       .call(xAxis2);

xBrushGraph.append("g")
        .attr("class", "y axis")
        .call(yAxis2);

//rotated y-axis label
xBrushGraph.append("text")
   .attr("transform", "rotate(-90)")
   .attr("y",0 - margin2.left)
   .attr("x", 0 - (height2/2))
   .attr("dy", "1em")
   .style("text-anchor", "middle")
   .text("Sale Price");

xBrushGraph.append("g")
       .attr("class","x brush")
       .call(brush)
       .selectAll("rect")
         .attr("y", -6)
         .attr("height", height2 + 7);

xBrushGraph.append("text")
   .attr("x", width/2)
   .attr("y", height2+25)
   .style("text-anchor", "middle")
   .text("Sale Date");

});

function brushed() {
var extent = brush.extent();
x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent [1][0] ]);
y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent [1][1] ]);
largeGraph.selectAll("circle")
          .attr("cx",function(d) { return x(d.date); })
          .attr("cy",function(d) { return y(d.price); });
largeGraph.select(".x.axis").call(xAxis);
largeGraph.select(".y.axis").call(yAxis);
}

Answer 1

问题在这里:

xBrushGraph.append("g")
   .attr("class","x brush")
   .call(brush)
  .selectAll("rect")
     .attr("y", -6)
     .attr("height", height2 + 7);

在这里，在 .call(brush) 之后，您明确设置属性 y和 height画笔内的所有矩形。这些矩形用于确定哪些区域允许您调整拉丝区域的大小并在其周围拖动。

对于一维情况，设置 'y' 和 'height' 属性可确保这些值有意义。刷子无法确定刷子应该有多高，因为它只有 x在其上声明的规模。在您的情况下，您不需要设置画笔框的高度，因为您提供的是 y规模。

去掉属性设置解决问题: http://jsfiddle.net/g7LGC/1/