javascript - 获取具有特定类的每个 "rect"的 x Position 属性

Question

我在获取给定 SVG 中具有“.selectdOrder”类的每个“矩形”的 x 属性时遇到问题。我想使用 x 位置在另一个 svg 中绘制线条。当我尝试使用下面的内容时，x 值返回为未定义。任何帮助将不胜感激!下面是代码:

let orderRect = this.svg.select('#pat_rect_line')

  .selectAll('.orderRect')
  .data([ordersInfo]);
  let orderRectEnter = orderRect.enter()
  .append('g')
  .classed('orderRect', true);
  orderRect = orderRectEnter.merge(orderRect);

  let rects = orderRect.selectAll('rect')
  .data((d) => d);
  let rectsEnter = rects.enter()
  .append('rect');
  rects = rectsEnter.merge(rects);
  rects.attr('class', getClassAssignment('ORDER_CATALOG_TYPE'))
  .attr('class', getClassAssignment('ORDER_STATUS'))
  .attr('x', (g) => this.timeScale(g.diff))
  .attr('y', 0)
  .attr('width', this.orderBar.width)
  .attr('height', this.orderBar.height)

  //this is the mousclick event that greys rects
    .on('click', d => {
      this.svg.selectAll('rects');
      if (this.currentlySelectedName === undefined) {
        this.currentlySelectedName = d.ORDER_MNEMONIC;
       console.log(this.currentlySelectedName);
       rects.selectAll('.selectedOrder')
       for(let rect of rects){console.log(rect.x);}

      } else {
        this.currentlySelectedName = undefined;

      }

      this.drawPatOrderRects();

      var selectedGroup = d3.selectAll('.selectedOrder');

     console.log(selectedGroup.size());
     let xPosition = rects.currentlySelectedName.x;
     console.log(xPosition);

  })//end the mousclick event that shows the graph

如果订单名称与单击鼠标时选择的名称相匹配，我会将“.selectedOrder”类分配给一个矩形。这是有效的，它会在控制台中记录订单的名称以及有多少个选定的订单。我只是在访问 x 位置时遇到问题!

谢谢!

任

Answer 1

我可能误读了你的问题。我还用一组更简单的基本代码来回答。

如果您有多个 x 坐标未知的 矩形，并且您想要一个数组来保存所选 矩形 的所有 x 坐标，那么您可以使用以下代码:

var x = selection.nodes().map(function(d) { return d.getAttribute("x"); });

如下所示:

var data = [];

for (i = 0; i < 20; i++) {
  data.push({ 
     x: d3.randomNormal(250,125)() ,
     y: d3.randomNormal(100,50)()
     });
 }
 
var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200);
  
 
var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y",function(d) { return d.y; })
  .attr("x",function(d) { return d.x; })
  .attr("width",10)
  .attr("height",10)
  .attr("fill", function(d,i) { return d3.schemeCategory20[i]; });

// Get the x attribute of each rectangle.
console.log( rects.nodes().map(function(d) { return d.getAttribute("x"); }) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.min.js"></script>

如果您的选择仅包含一个矩形，那么您可以通过以下方式获取该属性:

var x = selection.attr("x");

var data = [];

for (i = 0; i < 20; i++) {
  data.push({ 
     x: d3.randomNormal(250,125)() ,
     y: d3.randomNormal(100,50)()
     });
 }
 
var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200);
  
 
var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y",function(d) { return d.y; })
  .attr("x",function(d) { return d.x; })
  .attr("width",10)
  .attr("height",10)
  .attr("fill", function(d,i) { return d3.schemeCategory20[i]; });

// Get the x attribute of a rectangle (first in the selection).
console.log( rects.attr("x") );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.min.js"></script>

此外，如果您尝试为每个选定的功能 (rect) 附加一个功能 (line)，那么您可以尝试以下几行操作(无双关语)预期):

这可以做得更加 d3-ish，但我最大限度地减少了上面示例中的代码更改，并且感觉四个片段可能有点过多。另外，新线不需要位于同一个 svg 中(您的问题是:“我想使用 x 位置在另一个 svg 中绘制线。”)

var data = [];

for (i = 0; i < 20; i++) {
  data.push({ 
     x: d3.randomNormal(250,125)() ,
     y: d3.randomNormal(100,50)()
     });
 }
 
var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200);
  
 
var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y",function(d) { return d.y; })
  .attr("x",function(d) { return d.x; })
  .attr("width",10)
  .attr("height",10)
  .attr("fill", function(d,i) { return d3.schemeCategory20[i]; });

// Append a line from each square to the origin:
var lines = svg.selectAll("line")
  .data(rects.nodes())  // add one line for each item in the selection
  .enter()
  .append("line")
  .style("stroke", "black")
  .attr("x1",0)
  .attr("y1",0)
  .attr("x2",function(d) { return d.getAttribute("x"); })
  .attr("y2",function(d) { return d.getAttribute("y"); });
  
// Sure, let's make the lines dance to mousemove
svg.on("mousemove", function() {
  lines.attr("x1",d3.mouse(this)[0])
    .attr("y1",d3.mouse(this)[1]);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.min.js"></script>