Question

我发现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 - ＆gt;那么应该绘制它们各自的彩色矩形，保持c和d为空。对于整个数组，我得到下面的输出。随着图像的发展，

5 session id表示5行。
第一行和第二行包括两个矩形，第三行和第五行有3个矩形，第四行有1个矩形，每个城市都有各自的颜色和列
基于第二个值（第1行的ex.1和6） - ＆gt; 它们的颜色强度将依赖!!!更多数字，颜色越深 !!!

我想以这样的方式编写我的javascript代码 - ： Outout of array!!!

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>

如果可能，请提供一份小样本!!!

Answer 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内置函数。

你需要做3件事

根据您的域
将.attr('x', function(d){ return xAxis(d[0]) })和.attr('y', function(d){ return yAxis(d[1]) })添加到代码生成RECT
填写也接受函数，在这里创建比例也是有意义的，就像.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

Answer 2

我相信你可以这样做：

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

然后：

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

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

Answer 3

Here is a good example与bl.ocks.org上的内容非常接近。

根据json数组绘制rect？

3 个答案: