个人中心
gpt4 book ai didi

jquery - 根据json数组绘制rect？

转载 作者：行者123 更新时间：2023-11-30 05:47:22 24 4
gpt4 key购买 nike

我发现 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是session id(忽略)
  • 孟买、巴罗达、金奈和德里!!!是印度城市。
  • Mumbai=绘制红色矩形，baroda=棕色矩形，chennai=绿色矩形，delhi=蓝色矩形

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

  • 5 个 session ID 表示 5 行。
  • 第一行和第二行包括两个矩形，第三行和第五行有3个矩形，第四行有1个矩形，每个城市都有各自的颜色和列
  • 基于第二个值(例如第一行的 1 和 6)-->它们的颜色强度将取决于!!!数字越大，颜色越深!!!

我想以这样的方式编写我的 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>

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

最佳答案

更新 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)

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

更复杂的函数>

现在回想起学校的几何类(class)，我们可以进行从一个比例到另一个比例的转换，例如

  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])

更新: fiddle - 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 也接受 function ，在这里创建比例也很有意义，就像 .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

关于jquery - 根据json数组绘制rect？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17300848/

24 4 0
文章推荐： javascript - 在 xmlhttprequest 中替代 jQuery.ajaxSettings.traditional？
文章推荐： Javascript 获取对象的所有属性
文章推荐： java - 如何创建自定义 "ExpectedException"junit 规则？
文章推荐： c++ - 在使用 QPainterPath 绘制自由路径时找到交叉线
行者123
个人简介

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

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