个人中心
gpt4 book ai didi

javascript - 向 d3 曲线添加边界

转载 作者：行者123 更新时间：2023-11-28 09:58:39 24 4
gpt4 key购买 nike

我正在尝试使用类选择器(“曲线”)向 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>

最佳答案

curve 的 CSS 定义正在使用您将用于常规 HTML 元素的属性，例如 <div> . SVG 元素，如 <path>使用像 fill 这样的属性和 stroke去完成你想做的事。这是一篇描述如何应用填充和描边属性的好文章:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

关于javascript - 向 d3 曲线添加边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24816240/

24 4 0
文章推荐： css - 边框框不适用于行内 block 元素？
文章推荐： css - Shiny 的 absolutePanel 中的背景
文章推荐： css - Grunt 动态目标位置 sass
文章推荐： jquery - 在 jQuery 函数中选择类 a :active span vs. a.active 跨度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com