如何在 d3 中的同一图上绘制多个矩形
How do I plot multiple rectangles on the same plot in d3
我正在尝试使用 csv 文件中的数据在单个绘图上创建多个矩形。使用我目前的方法,我似乎正在为每行数据创建多个图。我怀疑我的问题与我如何选择和附加有关数据的 svg 元素有关。
d3.csv('Input/test_single.csv')
.row(function (d) { return d })
.get(function (error, rows) {
var chart = d3.select("#chart-div").data(rows).enter().append("svg").classed("chart", true).attr("width", width);
chart.append("rect")
.attr("x", function(d){return(parseInt(d.Start) + parseInt(spacer))})
.attr("y", 75)
.attr("width", function(d){return(parseInt(d.End) - parseInt(d.Start))})
.attr("height", 50)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2)
});
阅读连接思维,您正在做的是创建多个svg
节点,而不是具有多个矩形的单个svg
d3.csv('Input/test_single.csv')
.row(function (d) { return d })
.get(function (error, rows) {
var chart = d3.select("#chart-div").append('svg').classed("chart", true).attr("width", width)
chart.selectAll('rect').data(rows)
.enter()
.append("rect")
.attr("x", function(d){return(parseInt(d.Start) + parseInt(spacer))})
.attr("y", 75)
.attr("width", function(d){return(parseInt(d.End) - parseInt(d.Start))})
.attr("height", 50)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2)
});
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 用d3和numericjs在javascript中绘制错误椭圆
- 在画布上绘制d3形状的面积图
- 如何使用d3.js从csv文件中绘制areaplot?请任何人分享代码
- 使用Node js和D3实时绘制地图上的国家名称
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- d3.js绘制具有固定布局的网络
- d3绘制动画折线图的基本示例
- d3.js yaxis没有正确绘制所有记号
- 如何在 d3 中的同一图上绘制多个矩形
- 从对象数组数组绘制 D3 图表
- 绘制 D3 折线图后如何添加更多时间序列数据
- 如何用html表单中的数据重新绘制d3.js图表
- 在单击上展开表行并在里面绘制D3图表
- 在绘制d3图表之前,请检查多个异步函数是否已完成
- 如何用缩放选项绘制D3条形图
- 使用存储在d3.js中的数组中的数据绘制d3.svg.arc元素
- 绘制d3折线图时分析数据时出错