Javascript 向d3曲线添加边界_Javascript_Css_D3.js

Javascript 向d3曲线添加边界

javascript css d3.js

Javascript 向d3曲线添加边界,javascript,css,d3.js,Javascript,Css,D3.js,我正在尝试使用类选择器（“curves”）将边框添加到d3曲线中，我已使用.attr（）方法将其添加到这些对象中。为什么不给我的曲线添加一个边框呢在最初的代码中，我有几个选择器成功地瞄准了我想要的对象，但是由于某种原因，当涉及到这个特定的d3对象时，它不能很好地与CSS选择器一起工作（？）。对于这个问题，我非常感谢您提供具体的建议，但对于如何编辑像这些曲线这样的d3对象的外观，我也非常感谢您提供更一般的建议 <!DOCTYPE HTML> <html> <lin

我正在尝试使用类选择器（“curves”）将边框添加到d3曲线中，我已使用.attr（）方法将其添加到这些对象中。为什么不给我的曲线添加一个边框呢

在最初的代码中，我有几个选择器成功地瞄准了我想要的对象，但是由于某种原因，当涉及到这个特定的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>


*** 
.a{
颜色：黄色；
背景：红色；
字体系列：“Poller One”，verdana，arial，无衬线；
}
.曲线{
边界半径：20px 20px 20px 20px；
边框样式：实心；
边框颜色：黑色；
边框宽度：20px；
背景颜色：蓝色；
}
Lorem Ipsum
定义列表项
这就是定义
项目1
项目2
var数据=[30,50,80120150,60,15]；
var r=300；
var color=d3.scale.ordinal（）
.范围（[‘绿色’、‘红色’、‘蓝色’、‘橙色’、‘黄色’、‘紫色’、‘洋红’）；
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，1500）
.attr（“高度”，1500）；
var group=canvas.append（“g”）
.attr（'transform'，'translate（300300）'）；
var arc=d3.svg.arc（）
.内半径（125）
.外层（r）；
var pie=d3.layout.pie（）//在浏览器中检查对象
.value（函数（d）{返回d；}）；
var arcs=group.selectAll（“.arc”）//使用arc类选择所有内容
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）；
arcs.append（“路径”）
.attr（'d'，弧）
.attr（'fill'，函数（d）{返回颜色（d.data）；}）
.attr（“类”、“曲线”）；
arcs.append（“文本”）
.attr（“变换”，函数（d）{return“translate”（+arc.centroid（d）+”）；}）
.attr（'text-anchor'，'middle'）
.attr（'font-size'，'2em'）
.text（函数（d）{返回d.data；}）；
});

您对

曲线的CSS定义使用的属性将用于常规HTML元素，如
。类似于
的SVG元素使用类似于fill
和stroke
的属性来完成您想要做的事情。下面是一篇很好的文章，介绍了如何应用填充和斯托克特性：
您能提供一个简单的例子吗？我完全不知道如何分解代码，以便JSFIDLE站点显示与我的.html文件在浏览器中显示的内容相同的内容。