4

我在下面的一个较小的图中制作了一个带有二维画笔的散点图。这使用户能够动态地查看完整图形的子区域。但是，当我绘制区域画笔时，它不再是“可移动的”，因为无法像一维画笔那样用鼠标移动画笔。有 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);
}
4

1 回答 1

4

问题在这里：

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

在这里，在 之后.call(brush)，您显式设置了画笔内所有矩形的属性y和height。这些矩形用于确定哪些区域允许您调整和拖动刷过的区域。

对于 1D 情况，设置 'y' 和 'height' 属性可确保这些值有意义。刷子无法确定刷子应该有多高，因为它只标有x刻度。在您的情况下，您不需要设置画笔框的高度，因为您为它提供了y比例。

删除属性的设置解决了这个问题：http: //jsfiddle.net/g7LGC/1/

于 2013-09-16T22:13:46.820 回答