个人中心
gpt4 book ai didi

D3.js - 如何遍历数据集中的子数组

转载 作者：行者123 更新时间：2023-12-05 01:31:57 25 4
gpt4 key购买 nike

我试图让 d3 遍历我的数据中的子数组并生成多个饼图。

这是完整的代码(来自 https://gist.github.com/mbostock/1305111 和 https://gist.github.com/enjalot/1203641 ):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Test</title>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
 <style type="text/css">

body {
  text-align: center;
}

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

// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var datad = [
  {s:[ 20,  1, 1], l:[10,100]},
  {s:[ 1, 20, 1], l:[ 20, 200]},
  {s:[ 1, 1, 20], l:[ 30,300 ]}
];

// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as `d.name`. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var m = 10,
    r = 100,
    z = d3.scale.category20c();

// Insert an svg:svg element (with margin) for each row in our dataset. A
// child svg:g element translates the origin to the pie center.
var svg = d3.select("body").selectAll("svg")
    .data([datad])
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

 var pie = d3.layout.pie()           //this will create arc data for us given a list of values
        .value(function(d, i) { return d.s[i]; });    //we must tell it out to access the value of each element in our data array


// The data for each svg:svg element is a row of numbers (an array). We pass
// that to d3.layout.pie to compute the angles for each arc. These start and end
// angles are passed to d3.svg.arc to draw arcs! Note that the arc radius is
// specified on the arc, not the layout.
svg.selectAll("path")
    .data(pie)
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(0)
    .outerRadius(r + 2))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>

我得到一个饼图，它由数据集中每个“s”数组的“20”值组成。

第一个饼片取自datad[0][0]，第二个饼片取自datad[1][1]，第三个饼片取自datad[2][2]。

我需要三个饼图(一个对应我数据中的每个“s”数组)。

我认为我的问题在于:

     var pie = d3.layout.pie()  //this will create arc data for us given a list of values
        .value(function(d, i) { return d.s[i]; });  //we must tell it out to access the value of each element in our data array

我如何告诉它遍历每个 s 数组，而不是同时遍历 datad 和 s 数组。也就是说，我想迭代 datad[0]s[0]、datad[0]s[1]、datad[0]s[2] ... datad[2]s[0]、datad[2]s [1] (etc) 而不是 datad[0]s[0], datad[1]s[1], datad[2]s[2]

感谢提示或指点!

编辑:这是 fiddle :jsfiddle.net/H2SKt/701/

最佳答案

这里有一些地方出了问题，这些问题加在一起得到了一个漂亮的饼图，但它不是您要绘制的图表。

对于初学者，当您将数据加入您的 svg 选择时:

var svg = d3.select("body").selectAll("svg")
    .data([datad])

您将数据数组嵌套在一个新数组(方括号)中，您的数据数组是其中唯一的元素。所以你只能得到一个<svg>来自你的 enter()声明，不是三个。改成

var svg = d3.select("body").selectAll("svg")
    .data(datad)

然后你得到三个 <svg>元素，如您所愿。但是它们都没有饼图，因为您的饼图函数无法找到您告诉它要查找的数据值:

 var pie = d3.layout.pie()    
        .value(function(d, i) { return d.s[i]; });   

svg.selectAll("path")
    .data(pie)
  .enter().append("svg:path")

饼图函数需要传递一个数组数据，它会调用指定的value。 在数组的每个元素上运行。你告诉它数组的每个元素都有一个 s属性是一个数组，它应该访问该数组中的一个元素。当你的 pie 函数被传递给你的整个原始数据数组时，这是可行的(某种程度上)，但现在我们已经将原始数据数组拆分为不同的 SVG 元素。现在 pie 函数被传递给 {s:[ 1, 1, 20], l:[ 30,300 ]} 形式的数据对象。 ，并且不知道如何处理它。

所以你需要改变两件事:你需要确保 pie 函数只传递它应该使用的值数组，你需要告诉它如何访问该数组的每个元素的值.除了你实际上不必做第二部分，因为值只是原始数字，默认值函数将起作用:

 var pie = d3.layout.pie() 
       // .value(function(d, i) { return d; });  //default, not required

svg.selectAll("path")
      .data( function(d) { return pie(d.s); })
  .enter().append("svg:path")

d数据连接函数中的值是附加到每个 <svg> 的数据对象元素;匿名函数提取子数组并在其上调用 pie 函数，以返回每个 <path> 的数据数组该 SVG 中的元素。

工作 fiddle : http://jsfiddle.net/H2SKt/706/

关于D3.js - 如何遍历数据集中的子数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21733536/

25 4 0
文章推荐： laravel-4 - Laravel 队列永远运行
文章推荐： r - 解释 dplyr 中的 ungroup()
文章推荐： r - ggplot2图形缓存与knitr
文章推荐： microsoft-edge - Microsoft Edge 在版本 88.0.705.50 中删除了 allow-insecure-localhost 标志
行者123
个人简介

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

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