Question

我需要在D3中循环使用4个JavaScript对象。我需要为每个对象显示一个图表。 JSON看起来像这样：

d3.json("js/tools.json", function(error, data) {
                        var tau = Math.PI *1.5,
                            width = "250",
                            height = "250",
                            innerRadius = 100,
                            outerRadius = 120,
                            i;

                        var color = d3.scaleOrdinal()
                            .range(["#eec947", "#9b7560", "#76b7b1", "#f28e2c", "#fe9da6", "#bab1ac"]);

                        var arc = d3.arc()
                          .innerRadius(innerRadius-i)
                          .outerRadius(outerRadius-i)
                          .startAngle(0);

                        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "name"; }));

                        data.forEach(function(d, index) {
                            d.ratings = color.domain().map(function(name) {
                                return {name: name, rating: +d[name]};
                            });
                        var i = (outerRadius - innerRadius)*(index + 1) + index*3;
                        var heading = d3.select(".toolCharts").append("h4").text(d.name);
                        var svg = d3.select("body").selectAll(".toolCharts")
                            .data(data)
                            .append("svg")
                            .attr("class", "chart")
                            .attr("width", width)
                            .attr("height", height)
                            .append("g")
                            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

                        var g = svg.selectAll('.arc')
                            .data(function(d){return arc(d.ratings);})
                            .enter()
                            .append("g");

                        var background = g.append("path")
                            .datum({endAngle: tau})
                            .classed("bg", true)
                            .style("fill", "#ddd")
                            .attr("d", arc);
                        var foreground = g.append("path")
                            .data(function(d){ return d.rating/10 * tau})
                            .classed("arc", true)
                            .style("fill", function(d) {return color(i); })
                            .attr("d", arc);
                        var label = g.append("text")
                            .attr("x", -10)
                            .attr("y", -outerRadius + i + 20)
                            .style("text-anchor", "end")
                            .text(d.ratings.name);

                        });

                    });

每个＆＃34;名称＆＃34;是软件名称的名称，而彼此的键是数字评级。我需要显示每个标题的评级，如下所示：

我的代码目前生成4个SVG，每个SVG上面都有一个标题，但后来我很难过。如果我可以让弧线显示每个评级，那么我可以从那里拿走它。我只是不能让弧线显示在SVG中。＆＃34; var svg＆＃34;有人可以帮助我使用下面的代码吗？代码，让我知道我做错了什么？

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Outside iFrame</h1>
                <iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

我的第一直觉是创建一个包装函数，以便为json中列出的每个工具创建一个单独的d3.arc()生成器。我不太明白你为你的outerRadius - innerRadius做了什么，但我的（实际上是hacky ......）替代方案只是为json中列出的每个工具制作一个特定的比例。

这是一个显示我的尝试的块，我希望它有用：https://bl.ocks.org/beemyfriend/b9b0a013362bfc0cefa43f7bbb8d403d

如何在D3中循环JavaScript对象？

1 个答案: