Question

我是D3的新手，并在Lynda课程“使用D3.js进行数据可视化”中学习它。以下代码不能更改所选元素的样式。与教学练习完全一样。

d3.selectAll('.item:nth-child(2)')
.classed({
'highlight': true,
'item': false,
'bigger': true})

然而，在我运行以下代码后，它们按照需要运行。

d3.selectAll('.item:nth-child(2)')
.classed('highlight',true)
.classed('item', false)
.classed('bigger',true})

其余的类似乎在.classed和.style中使用了很多（{}）。网上的一些答案表明问题源于D3的错误版本，其中.classed（{}）或.style（{}）不起作用。我怎么解决这个问题？以下是我的html和css代码。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphic</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="style.css">
</head>
  <body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <div class="container">
    <h2>D3 Graphic</h2>
    <section id="chart">
     <div class="item">Barot Bellingham</div>
     <div class="item">Hassum Harrod</div>
     <div class="item">Jennifer Jerome</div>
     <div class="item">Richard Tweet</div>
     <div class="item">Lorenzo Garcia</div>
     <div class="item">Xhou Ta</div>
    </section>
  </div>
  <script src="d3.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS代码

.highlight {
  color: #C64C6F;
  font-weight: 600; 
}

.item { 
  padding-left: 30px; 
}

.bigger {
  font-size: 150%;
}

Answer 1

d3v4远离使用对象文字（即{}）来设置属性，类和样式。您可以通过添加d3-selection-multi（https://d3js.org/d3-selection-multi.v1.min.js）以及调用.attrs或.styles代替.attr或{{1}来添加支持以设置属性和样式}

不幸的是，d3-selection-multi似乎没有读取对.style的支持。您可以通过调用.classed({})来设置（或取消设置）多个类，但似乎没有办法设置某些类并在v4中只使用一个函数调用来取消设置其他类。

或者，您可以通过将http://d3js.org/d3.v4.min.js更改为http://d3js.org/d3.v3.min.js来使用之前版本的d3。

<强>参考
https://github.com/d3/d3-selection/blob/master/README.md#selection_classed
https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#classed

D3选择：.classed（{}）不起作用，.style（{}）也不起作用

1 个答案: