通过 dbuezas 在 D3 Pie 中添加外部数据

Question

我是 D3 的新手，我正在尝试使用 d3 图表进行一些可视化，但我似乎无法弄清楚如何向这个特定的图形添加数据： http://bl.ocks.org/dbuezas/9306799

我尝试使用：

 d3.csv("data.csv", type, function(error, data) {
    if (error) throw error; });

但我似乎找不到如何在当前设置中使用它。

如果有人能指出正确的方向，我将不胜感激。

代码：

<script>

var svg = d3.select("body")
    .append("svg")
    .append("g")

svg.append("g")
    .attr("class", "slices");
svg.append("g")
    .attr("class", "labels");
svg.append("g")
    .attr("class", "lines");

var width = 960,
    height = 450,
    radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
        return d.value;
    });

var arc = d3.svg.arc()
    .outerRadius(radius * 0.8)
    .innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var key = function(d){ return d.data.label; };

var color = d3.scale.ordinal()
    .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

function randomData (){
    var labels = color.domain();
    return labels.map(function(label){
        return { label: label, value: Math.random() }
    });
}

change(randomData());

d3.select(".randomize")
    .on("click", function(){
        change(randomData());
    });


function change(data) {

    /* ------- PIE SLICES -------*/
    var slice = svg.select(".slices").selectAll("path.slice")
        .data(pie(data), key);

    slice.enter()
        .insert("path")
        .style("fill", function(d) { return color(d.data.label); })
        .attr("class", "slice");

    slice       
        .transition().duration(1000)
        .attrTween("d", function(d) {
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                return arc(interpolate(t));
            };
        })

    slice.exit()
        .remove();

    /* ------- TEXT LABELS -------*/

    var text = svg.select(".labels").selectAll("text")
        .data(pie(data), key);

    text.enter()
        .append("text")
        .attr("dy", ".35em")
        .text(function(d) {
            return d.data.label;
        });

    function midAngle(d){
        return d.startAngle + (d.endAngle - d.startAngle)/2;
    }

    text.transition().duration(1000)
        .attrTween("transform", function(d) {
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
                return "translate("+ pos +")";
            };
        })
        .styleTween("text-anchor", function(d){
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                return midAngle(d2) < Math.PI ? "start":"end";
            };
        });

    text.exit()
        .remove();

    /* ------- SLICE TO TEXT POLYLINES -------*/

    var polyline = svg.select(".lines").selectAll("polyline")
        .data(pie(data), key);

    polyline.enter()
        .append("polyline");

    polyline.transition().duration(1000)
        .attrTween("points", function(d){
            this._current = this._current || d;
            var interpolate = d3.interpolate(this._current, d);
            this._current = interpolate(0);
            return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                return [arc.centroid(d2), outerArc.centroid(d2), pos];
            };          
        });

    polyline.exit()
        .remove();
    };

    </script>

Answer 1

工作代码here。

首先你需要用下面的一些数据示例制作一个json文件：

[{
  "label": "Lorem ipsum",
  "value": 0.719082972034812
}, {
  "label": "dolor sit",
  "value": 0.03566315700300038
}, {
  "label": "amet",
  "value": 0.14385902439244092
}, {
  "label": "consectetur",
  "value": 0.5280405324883759
}, {
  "label": "adipisicing",
  "value": 0.42760335514321923
}, {
  "label": "elit",
  "value": 0.7200075597502291
}, {
  "label": "sed",
  "value": 0.7396465912461281
}, {
  "label": "do",
  "value": 0.8943409691564739
}, {
  "label": "eiusmod",
  "value": 0.02541762450709939
}, {
  "label": "tempor",
  "value": 0.31414360040798783
}, {
  "label": "incididunt",
  "value": 0.8193990120198578
}]

参考我的文章data.json

然后在脚本中像这样加载 json

d3.json("data.json", function(json) {
    change(json);//pass the loaded the json to change function for drawing.
});

Answer 2

我也遇到了同样的问题，但就我而言，我来自 ruby 应用程序。数据从数据库中加载出来，我真的无法在 JavaScript.

中加载 json 文件

我稍微修改了@dbuezas 示例，使其具有可重用的功能。我正在设置 svg 对象并在内部调用更改。

我在 ERB 视图中，我的数据在 ruby 个实例变量中。

<script>
        var colors = d3.scale.ordinal()
            .domain(<%= @pie_categories.inspect.html_safe %>)
            .range(<%= @pie_colors.inspect.html_safe %>);
        var chart_data = <%= @pie_chart_data.to_json.html_safe %>;
        var width = 450, height = 350;
        create_pie_chart_at('#categories_pie_chart',
           colors, chart_data, width, height);
</script>

通过 dbuezas 在 D3 Pie 中添加外部数据

Add external data in D3 Pie by dbuezas’s

javascript

d3.js

pie-chart