根据json数组绘制rect？答案

【问题标题】：Draw rect according to json array?根据json数组绘制rect？
【发布时间】：2013-06-25 15:01:16
【问题描述】：

我发现 d3js 非常有趣。所以我想我应该试一试。我对这个框架相当陌生，需要一些帮助我有一个 json 文件。事情是这样的--:

            ["2511a51", [["mumbai",1,6], ["Baroda",2,7]]]
            ["2882bd9", [["mumbai",3,8], ["chennai", 2,9]]]
            ["1d3e1a2", [["mumbai",0,3],["Baroda",2,6], ["Delhi",7,1]]]
            ["1882b41", [["mumbai",10,9]]]
            ["1d4ffd8", [["chennai",2,5], ["mumbai", 5,9], ["Delhi",8,8]]]

这里，

2511a51 是会话 ID（忽略）
孟买、巴罗达、钦奈和德里！！！是印度城市。
Mumbai=绘制红色矩形，baroda=棕色矩形，chennai=绿色矩形，delhi=蓝色矩形

我想要的是，如果一个 json 行有 a 和 b -->那么应该绘制它们各自的彩色矩形，保持 c 和 d 为空。所以对于整个数组，我得到以下输出。如图所示，

5 个会话 ID 表示 5 行。
第一行和第二行包含两个矩形，第三行和第五行包含三个矩形，第四行包含一个矩形，每个城市都有各自的颜色和列
基于第二个值（例如第一行的 1 和 6）-->它们的颜色强度将取决于！！！数字越多，颜色越深！！！

我想以这样的方式编写我的 javascript 代码 ---：

MY fiddle--not working

我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>demo-staticArray!!!</title>

</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var SVG = d3.select("body").append("svg")
            .attr("class","stage")
            .attr("width",800)
            .attr("height",600)
            .style("background-color", "beige")
            .style("margin-left","200");

    var array=  ["2511a51", [["a",1], ["b",2]]]
            ["2882bd9", [["a",3], ["c", 2]]]
            ["1d3e1a2", [["a",0],["b",2], ["d",7]]]
            ["1882b41", [["a",10]]]
            ["1d4ffd8", [["c",2], ["b", 5], ["d",8]]]

    var RECT= SVG.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("width", 30)
            .attr("height", 10)
            .style("fill","red");//how do I provide conditions for fill-->a=red,b=brown,c=green,d=blue
    //how do I manage them such that they are arranged in a manner shown in the image.
    //I am unable to move ahead of this!!!!I am facing problem in iterations and conditions

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

如果可能，请提供一个小的工作样本！！！

【问题讨论】：

通常情况下，您应该为这种“任务”提供一个 jsfiddle...
是的，我同意，但我不知道如何在其中添加 d3.js 脚本？？
5 分钟！！！我正在拉小提琴
（左侧的外部来源）
d3.js 也在“框架和扩展”中

标签： jquery json d3.js javascript

【解决方案1】：

更新 2：每次您在 d3 中使用 selects 时，您都将数据映射到您的 UI 元素及其属性。在大多数情况下，您都是这样做的

 ... select('rect').data(myData)

然后您需要将数据集中项目的属性实际映射到 UI 元素的属性，您正在这样做提供执行映射的函数，即

  var myData = [{x:0, y:0 } , { x: 100 , y : 100 }]
  // we mapped our data to rect elements on svg canvas 
  // and created new rect elements for data items which didnt have it before
  // now we have two elements in total as myData had 2 elements
  var rect = svg.select('rect').data(myData).enter()

  // now each rect has x attribute equals to 'x' property of data item
  rect.attr('x', function(d) { return d.x } )

  // and the same for y attribute and 'y' property
  rect.attr('y', function(d) { return d.y } )

  // now if you also set height and width properties of UI elements 
  // you will see two rectangulars
  rect.attr('width', 50).attr('height', 50)


  // now you can rewrite your previos lines like that
  var xScale = function(d) { return d.x }
  rect.attr('x', xScale)

现在很明显，如果您有更复杂的方法来计算画布上的 X 坐标而不仅仅是数据项属性，那么您将拥有比当前的 xScale 更复杂的功能

现在回想学校的几何课程，我们可以进行从一种尺度到另一种尺度的转换，例如

  var xScale = function(d) { return 50 + d.x * 100 }

这意味着如果 d.x 等于 1 ，函数将返回 150 ，对于 2 它将是 250 等等

最后一步，为了避免自己弄清楚如何创建此缩放功能，您可以使用内置的 d3 功能，例如我在答案末尾放置的链接

   var xScale = d3.scale.linear()
           .domain([0, 10]).range([50, 550])

更新：小提琴 - http://jsfiddle.net/EdjbH/5/

注意：我稍微更改了您的源数据，以使其对 d3 更有意义。看看颜色是如何生成的，您需要构建自己的调色板，例如推荐的 gines capote。为了绘制轴，您可以使用 d3 内置函数。

你需要做三件事

根据您的域创建 x 轴和 y 轴刻度
将 .attr('x', function(d){ return xAxis(d[0]) }) 和 .attr('y', function(d){ return yAxis(d[1]) }) 添加到生成 RECT 的代码中
fill 也接受函数，并且在这里创建使用的比例也是有意义的，就像.style('fill', function(d) { return colorScale(d[0]]) })

还因为实际上您有数组数组，您需要将 .data(data) 更改为 .data(function(d){ return d[1] })

或者，您可以手动编写代码，例如

var svg = d3.select("svg")
        .attr("class","stage")
        .attr("width",800)
        .attr("height",600)
        .style("background-color", "beige");

var data=  [{ key :"2511a51", values : [["a",1], ["b",2]] },
         { key :"2882bd9", values : [["a",3], ["c", 2]]},
         { key: "1d3e1a2", values : [["a",0],["b",2], ["d",7]] },
         { key :"1882b41", values : [["a",10]] },
         { key :"1d4ffd8", values : [["c",2], ["b", 5], ["d",8]]}];

var width  = 30, padding = 10, height = 10  

var   code = function (c) {return c.charCodeAt(0) - 'a'.charCodeAt(0) }
, xScale = function (d) { return (width + 2*padding) * code(d[0]) }
, yScale = function (d) { return (height + 2 * padding) * d[1] }            
, color = d3.scale.category20() // replace with your palete
, cScale = function(d) { return color(code(d[0])) }

var g = svg.selectAll("g").data(data).enter().append("g")

var rects= g.selectAll("rect.colored")
        .data(function(d){ return d.values })
        .enter().append("rect")
        .attr('class','colored')
        .attr("width", width)
        .attr("height", height)
        .attr('x', xScale )
        .attr('y', yScale )
        .style('fill',  cScale);

检查此参考

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category10

【讨论】：

我太傻了，我现在才注意到！！！如果 json 中有 5 个会话 id 则应该有 5 行，这就是上图所示。而且我们的对齐错误！！！我们的输出有大约 8 行，我很晚才注意到，对不起-- -2 问题---行之间存在不必要的间隙。我现在正在尝试理解您的代码并对其进行一些调整。
我已经更新了我的问题，请看一下！！！数组值已更改，并且要添加更多功能 - 即基于第二个值 - [["parties", 8,2]]]--->所以基于值 2，颜色应该有点暗淡，如果超过5，那就应该更强烈一点！！！
我已经理解了你的大部分代码，但是我无法理解这部分--->var code = function (c) {return c.charCodeAt(0) - 'a'.charCodeAt (0) } 我尝试对这部分进行一些调整，但没有用！！！我的数组现在有 mumbai、baroda、chennai、delhi 而不是 delhi，所以 chartcode 无法使用它！！！有什么想法吗？这个项目比我想象的要难！！！
@MESSIAH 所以你有会话数组和列表中的会话数定义表中的行。每个会话都有点数组，指定城市和两个数字，城市定义列，第一个数字被忽略，第二个数字定义颜色饱和度，对吗？
@MESSIAH 阅读这篇文章，它有你建表所需的所有东西，leanpub.com/D3-Tips-and-Tricks/…

【解决方案2】：

我相信你可以这样做：

var color = new Array();
color[0]="red";
color[1]="blue";

然后：

.style("fill", function(f) { ... return color[1] }

... 表示 json 是否有行 a 或 b 或其他行

【讨论】：

【解决方案3】：

Here is a good example 与您在 bl.ocks.org 上寻找的内容接近。

【讨论】：