【发布时间】：2017-05-23 00:56:01
【问题描述】：
我是 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%;
}
【问题讨论】：
标签： javascript d3.js