Question

我无法获得每个＆＃34; rect＆＃34;的x attr。我在给定的SVG中有类＆＃34; .selectdOrder＆＃34;。我想用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

我正在分配＆＃34; .selectedOrder＆＃34;如果订单名称与鼠标单击时选择的订单名称匹配，则为class。这有效，它记录了控制台中订单的名称以及有多少选定的订单。我只是无法访问x位置！

谢谢你！

仁

Answer 1

我可能会误读你的问题。我也在回答一组更简单的基本代码。

如果您有多个rects具有未知的x坐标，并且您想要一个包含所选rects的所有x坐标的数组，那么您可以使用以下代码：

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

如下所示：

＆＃13;

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"); }) );

＆＃13;

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

＆＃13;

如果您的选择只包含一个rect，那么您可以使用以下内容获取该属性：

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

＆＃13;

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") );

＆＃13;

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

＆＃13;

另外，如果您尝试为每个所选要素（line）附加一个要素（rect），那么您可以尝试以下几行（无双关语）：

这可以做得更多d3-ish，但我正在最大限度地减少上面示例中的代码更改，并感觉四个片段可能有点过分。此外，新行不需要在同一个svg中（你的问题是：＆＃34;我想使用x位置在另一个svg中画线。＆＃34;）

＆＃13;

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]);
})

＆＃13;

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

＆＃13;

为每个＆＃34; rect＆＃34;获取x Position属性与特定的类

1 个答案: