2

我发现 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 行。
  • 第一行和第二行包括两个矩形，第三和第五行有 3 个矩形，第 4 行有 1 个矩形，每个城市都有各自的颜色和列
  • 基于第二个值（例如第一行的 1 和 6）-->它们的颜色强度将取决于！！！数字越多，颜色越深！！！

我想以我得到这个的方式编写我的 javascript ---： 超出数组！！！

我的小提琴——不工作

我的代码：

<!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>

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

4

3 回答 3

1

更新 2：每次selects在 d3 中使用时，您都将数据映射到您的 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 }

这意味着如果 dx 等于 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件事

  • 根据您的域创建 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

于 2013-06-25T15:11:08.867 回答
0

我相信你可以做这样的事情：

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

接着：

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

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

于 2013-06-25T16:48:39.720 回答
0

这是一个很好的例子，它与您在bl.ocks.org上寻找的内容很接近。

于 2016-10-07T23:15:42.510 回答