我正在使用 d3.js，并且想知道如何获得边、宽度、坐标等；的程度。在这样的例子中 http://bl.ocks.org/mbostock/1667367

最佳答案

Brush.extent()

使用画笔控件时，您可以使用画笔对象上的 .extent() 方法访问有关画笔状态的信息。
.extent() 方法返回的信息取决于您连接到画笔对象的比例类型。

如果您链接了一个比例尺(X 比例尺或 Y 比例尺，但不是两者)，则 extent 方法返回 [minimum, maximum] 形式的双元素数组。

如果您将 X 和 Y 比例都附加到画笔对象，那么 extent 方法将返回一个 [‍​[xMinimum, yMinimum], [xMaximum, yMaximum]​] 形式的嵌套数组。

但是这些最小值和最大值是什么？这也取决于规模。如果比例尺具有有效的 .invert(value) 方法，则最小值和最大值将转换为您的数据域值。对于没有简单 invert 方法的序数、阈值和其他比例，画笔函数返回坐标系中对画笔元素有效的值。

1.一维笔刷

要针对您链接到的特定示例回答您的问题，我们需要查看笔刷对象和缩放对象。在该示例中，画笔连接到较小的“上下文”图表(x2 比例)上的水平比例:

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 brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

context.append("g")
  .attr("class", "x brush")
  .call(brush)  //call the brush function, causing it to create the rectangles
.selectAll("rect") //select all the just-created rectangles
  .attr("y", -6)
  .attr("height", height2 + 7); //set their height

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

var extent = brush.extent(); //returns [xMin, xMax]
var width = extent[1] - extent[0]; //data-width = max - min

var extent = brush.extent(); //returns [xMin, xMax]
var rangeExtent = [x2( extent[0] ), x2( extent[1] ) ]; //convert
var rangeWidth  = rangeExtent[1] - rangeExtent[0];

function brushed() {

  if (brush.empty()) {
      //either the height OR the width is empty
      x.domain( x2.domain() ); //reset X scale
      y.domain( y2.domain() ); //reset Y scale
  }

  var extent = brush.extent();
  x.domain( [extent[0][0] , extent[1][0] ] ); //min and max data X values
  y.domain( [extent[0][1] , extent[1][1] ] ); //min and max data Y values

  var rangeExtent = [
          [x2(extent[0][0]), y2(extent[0][1])],
          [x2(extent[1][0]), y2(extent[1][1])]
       ];
  var rangeWidth  = rangeExtent[1][0] - rangeExtent[0][0];
  var rangeHeight = rangeExtent[1][1] - rangeExtent[0][1];


  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}

function brushed() {

  //use the brush object's values to set the data domains:
  if (brush.empty()) {
      //either the height OR the width is empty
      x.domain( x2.domain() ); //reset X scale
      y.domain( y2.domain() ); //reset Y scale
  }

  var extent = brush.extent();
  x.domain( [extent[0][0] , extent[1][0] ] ); //min and max data X values
  y.domain( [extent[0][1] , extent[1][1] ] ); //min and max data Y values

  //use the brush extent rectangle to get the SVG coordinates:
  var extentRect = d3.select("g.x.brush rect.extent");

  var rangeWidth  = extentRect.attr("width");
  var rangeHeight = extentRect.attr("height");
  var rangeLeft = extentRect.attr("x");
  var rangeTop = extentRect.attr("y");


  focus.select(".area").attr("d", area);
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}

关于javascript - D3.js 画笔控件 : getting extent width, 坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22873551/