Question

我正在使用d3尝试更改c3图中的属性，我可以通过其css属性检测元素的唯一方法是：“text.c3-chart-arcs-title”。该页面有两个带有css属性的元素，并且该函数被调用2次以获取这两个元素。我的代码是：

if(d3.select("text.c3-chart-arcs-title")){
       let vari = d3.select("text.c3-chart-arcs-title");
       console.log("got here");
       vari.attr("id", "title" + name); //name is a variable that must be different between both elements
       vari.attr("class", "substitute"); //I replace the css to be able to get to the second graph
                }

然而，只有第一个元素受到我的更改的影响，第二个元素即使我有2次“到达这里”也意味着第二个元素被检测到。

注意：之后我将使用以下两个组件：

$("#title" + name).css('cursor', 'pointer')
                    .click(function () {
                        //function using variables of each component 1 and 2 previously selected 
                        }
                    });

你能否告诉我我做错了什么以及如何访问第二个元素？谢谢你的帮助，

Answer 1

如果我理解正确，你有一些预先存在的元素共享同一个类，并希望根据它们在DOM中的顺序为它们分配新的id。

您只有两个元素，但实际上是在循环中单独选择每个元素。这不是真正的＆＃34; d3方式＆＃34;对于使用d3的许多常见任务，循环是不必要的。

让我们一次选择所有图表，并立即为所有元素分配新属性。我们有两种方法可以做到这一点：

根据每个元素的索引分配一个新的ID
根据我们绑定到所选元素的数据分配新ID

方法一很简单：

＆＃13;

// select all charts and give them an id based on their index:
d3.selectAll(".chart")
  .attr("id", function(d,i) { return "Chart"+i; });
  
// adding buttons for demonstration:
d3.select("body").selectAll(null)
  .data([0,1,2])
  .enter()
  .append("p")
  .style("cursor","pointer")
  .text(function(d) { return "Chart:" + d; })
  .on("click", function(d) {
    d3.selectAll(".chart")
      .style("background-color","white");
    d3.select("#Chart"+d)
      .style("background-color","yellow");
  });

＆＃13;

.chart {
  padding: 20px;
  display: inline-block;
  border: 1px dotted #ccc;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<div class="chart">This is Chart 1</div>
<div class="chart">This is Chart 2</div>
<div class="chart">This is Chart 3</div>

<p> Select a div: </p>

＆＃13;

但是，方法二也是如此，它还允许您轻松地为图表指定特定名称：

＆＃13;

// deterimne some id's beforehand
var names = ["Chart1","Chart2","Chart3"];

// select all charts and bind the id array to it
// then set the id of each chart based on the bound data:
d3.selectAll(".chart")
  .data(names)
  .attr("id", function(d) { return d; });
  
// and buttons for demonstration:  
d3.select("body").selectAll(null)
  .data(names)
  .enter()
  .append("p")
  .style("cursor","pointer")
  .text(function(d) { return d; })
  .on("click", function(d) {
    d3.selectAll(".chart")
      .style("background-color","white");
    d3.select("#"+d)
      .style("background-color","yellow");
  });

＆＃13;

.chart {
  padding: 20px;
  display: inline-block;
  border: 1px dotted #ccc;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<div class="chart">This is Chart 1</div>
<div class="chart">This is Chart 2</div>
<div class="chart">This is Chart 3</div>

<p> Select a div: </p>

＆＃13;

您的方法可以正常工作，它在下面进行了表面修改（这使得问题的陈述问题无法重现，但这是一个x，y问题，因为您的问题可能真的是如何实现结果（＆＃34;如何访问第二个元素＆＃34; ），而不是代码的错误），但您选择的方法有点超出了通常的d3方法。这是您的代码按预期工作：

＆＃13;

var names = ["chart2","chart1"]

function test() {

  if(d3.select(".chart")){
       let vari = d3.select(".chart");
       console.log("got here");
       vari.attr("id", names.pop()); 
       vari.attr("class", "substitute"); //I replace the css to be able to get to the second graph
                }
}

test();
test();

d3.select("#chart1")
  .style("border","1px solid black");
  
d3.select("#chart2")
  .style("background-color","#ccc");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<div class="chart">Chart 1</div>
<div class="chart">Chart 2</div>

＆＃13;

d3.select效果不好？

1 个答案: