D3JS selectAll to append rect
D3JS selectAll to append rect
我对d3.js可视化数据的简洁性感到惊讶。这种简洁背后隐藏的复杂性也让人有点难以理解它是如何工作的。以下是中代码的一部分http://mbostock.github.com/d3/ex/calendar.html
问题是它如何在创建的svg数量(var svg=d3….)内创建一天的rect。在语句svg.selectAll("rect.day")
中,我不确定它如何为每个svg添加rect(selectAll尝试选择rect.day!)
var margin = {top: 19, right: 20, bottom: 20, left: 19},
width = 960 - margin.right - margin.left, // width
height = 136 - margin.top - margin.bottom, // height
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
percent = d3.format(".1%"),
format = d3.time.format("%Y-%m-%d");
var svg = d3.select("#chart").selectAll("svg")
.data(d3.range(1990, 2011))
.enter().append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + (margin.left + (width - cellSize * 53) / 2) + "," + (margin.top + (height - cellSize * 7) / 2) + ")");
var rect = svg.selectAll("rect.day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.datum(format);
你看过用连接思考吗?它非常清楚地解释了数据联接的工作原理——本质上,在D3中,使用.selectAll()
将数据联接到一个选择,然后根据需要使用.enter()
附加新元素。所以
svg.selectAll("rect.day")
.data( ... )
.enter().append("rect")
.class("day")
根据需要基于数据创建新的rect
元素。
相关文章:
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 在刚刚调用的append函数之后,jquery.height()不会返回实际值
- Javascript - element.childNodes does not see an append.newch
- append元素don'不要在提交时出现
- Jquery append oly获取循环Rails中的最后一个elemen
- renderReact/Rect Router+Node/Express.js的服务器端/同构渲染中未定义renderP
- 如何在yii中使用append
- 文本编辑后,append函数不适用于文本区域
- D3.JS向rect添加缩放和列表项
- MutationObserver observe jquery append?
- 使用append时复制内容的DOM
- Append元素在运行两次函数后不显示
- datatable append html,但已刷新
- D3JS selectAll to append rect
- 从联合js rect对象调用引导模式
- jQuery通过Json数组在append循环中
- 尝试添加一个选项以使用append进行选择,但没有任何结果
- 在.append之后运行函数
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 使用jquery.append()方法