0
我正在嘗試使用類選擇器（'曲線'）向d3曲線添加邊框我已經使用.attr（）方法將這些邊框添加到了這些對象中。爲什麼這不會爲我的曲線添加邊框？向d3曲線添加邊框
在原始代碼中，我有幾個選擇器成功地定位了我想要的對象，但由於某些原因，當涉及到此特定d3對象時，它不能很好地處理CSS選擇器（？）。我非常感謝關於這個問題的具體建議，同時也對如何編輯這些曲線這樣的d3對象的外觀提供了更一般的建議。
<!DOCTYPE HTML>
<html>
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>
<head>
<title> *** </title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='C:\Users\***\Google Drive\Code\jquery-1.11.1.js'></script>
<style >
.a{
color:yellow;
background:red;
font-family: 'Poller One',verdana, arial, sans-serif;
}
.curves{
border-radius: 20px 20px 20px 20px;
border-style: solid;
border-color: black;
border-width: 20px;
background-color: blue;
}
</style>
</head>
<body class="a">
<div>
<p align="center">Lorem Ipsum</p>
</div>
<dl>
<dt>Defintion list item</dt>
<dd>This is the definition</dd>
</dl>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</body>
<script>
var data = [30,50,80,120,150,60,15];
var r = 300;
var color = d3.scale.ordinal()
.range(['green','red','blue','orange','yellow','purple','magenta']);
var canvas = d3.select("body").append("svg")
.attr("width", 1500)
.attr("height", 1500);
var group = canvas.append("g")
.attr('transform', 'translate(300,300)');
var arc = d3.svg.arc()
.innerRadius(125)
.outerRadius(r);
var pie = d3.layout.pie() //go inspect the objects in the browser
.value(function (d) { return d; });
var arcs = group.selectAll(".arc") // select everything with the arc class
.data(pie(data))
.enter()
.append("g")
.attr('class', 'arc');
arcs.append("path")
.attr('d', arc)
.attr('fill', function (d) { return color(d.data); })
.attr('class', 'curves');
arcs.append("text")
.attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
.attr('text-anchor', 'middle')
.attr('font-size', '2em')
.text(function (d) { return d.data; });
});
</script>
</body>
</html>
你可以提供一個[的jsfiddle（http://jsfiddle.net/）？ – Filly
我完全不熟悉如何破解代碼，所以jsfiddle網站顯示我的.html文件在瀏覽器中顯示的相同內容。 http://jsfiddle.net/T2vAL/2/ – d8aninja