Question

我正在D3.js上做一个大学项目。我复制了斯科特·默里关于D3.js的书中的饼图代码。有用。但现在我遇到了一个问题。

1）我想在html页面的特定位置显示饼图，但我无法做到。喜欢

2）当我重新提交数据时，它创建了另一个饼图，紧挨着旧的那个。但我想首先删除旧的饼图，然后在同一个地方创建一个新饼图。请帮帮我。

D3：饼图布局

   <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
        text {
            font-family: sans-serif;
            font-size: 12px;
            fill: white;
        }

    </style>
    <body>
    <script type="text/javascript">

        //Width and height
        var w = 300;
        var h = 300;

        var dataset = [ 5, 10, 20, 45, 6, 25 ];

        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);

        var pie = d3.layout.pie();

        //Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Set up groups
        var arcs = svg.selectAll("g.arc")
                      .data(pie(dataset))
                      .enter()
                      .append("g")
                      .attr("class", "arc")
                      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

        //Draw arc paths
        arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i);
            })
            .attr("d", arc);

        //Labels
        arcs.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.value;
            });

    </script>
</body>

Answer 1

要将其放在一个元素中，例如，<div>而不是<body>，您只需要将选择svg的选项替换为选择器您想要放置图表的元素。

所以而不是

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

你可以这样做：

var svg = d3.select("#container")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

如果您的网页上有某个<div id = "container"></div>。

希望这会有所帮助：）

关于特定地点的D3.js代码中的错误

1 个答案: