自动设置d3 / dimple数据可视化的尺寸以便清晰 [英] automatically set dimensions of d3/dimple data visualization for legibility
问题描述
我正在尝试创建一个
它到达那里，但它不清晰，这是一个问题。
我想让它以这样一种方式呈现，它将以可理解的方式显示数据，无论输入文件的大小，即它应该是动态。
我知道 data.length 是行数，但是rows输入csv中的行数？
我推荐使用 chart.setBounds （100，100，data.length * k，300）其中 k 应该是标签的高度+确定 k ？
的最好方法是什么？我想假设
k 与y轴相关，真的是或者应该是由输入的最大值设置的，并且没有其他我能做的事情。是这样吗？ 我一直在尝试尝试不同的值，即尝试和错误 - 但这显然不是最理想。
总是生成地图的可维护和有效的方法是，x轴的索引都清晰可读，y轴由最大值？
这是我用来生成条形图的代码。
<！DOCTYPE html>
< html>
< script src =http://d3js.org/d3.v3.min.js>< / script>
< script src =http://dimplejs.org/dist/dimple.v1.1.1.min.js>< / script>
< script type =text / javascript>
function draw（data）{
use strict;
var margin = 75，
width = 9000 - margin，
height = 600 - margin;
var svg = d3.select（body）
.append（svg）
.attr（width，width + margin）
。 attr（height，height + margin）
.append（'g'）
.attr（'class'，'chart'）;
var chart = new dimple.chart（svg，data）;
chart.setBounds（100，100，500，300）;
var x = chart.addCategoryAxis（x，'loc'）;
var y = chart.addMeasureAxis（y，'title''）;
var lines = chart.addSeries（[project]，dimple.bar，[x，y]）;
chart.draw（）;
};
< / script>
< body>
< script type =text / javascript>
d3.csv（Germany.csv，draw）;
< / script>
< / body>
< / html>
首先，我迭代数据你提供了删除json的键和值中的所有双引号，像这样。
datas = []
data.forEach（function（d）{
var ob = {};
for（var key in d）{
var k = key.replace（// g ，）.trim（）; //删除所有双引号和修剪
var v = d [key] .replace（// g，）.trim和修剪
ob [k] = v;
}
datas.push（ob）
}）
然后我根据数据长度设置svg的宽度。
var width = data.length * 5 -margin; // 5是文本标签字体的常量宽度
if（width< 500）//设置数据集低的情况下的最小宽度。
width = 600;
设置svg的宽度和这样的图表
var svg = d3.select（body）
.append（svg）
.attr（width，width + margin） //将计算宽度设置为svg
//设置图表对象的宽度
chart.setBounds（100，100，width -margin，300）;
工作代码110分这里
所有点的工作代码此处
I'm trying to create a bar chart to visualize the number of Data-Science jerbs around the Federal Republic of Germany- right now it looks like this:
It's getting there, but it's not legible, which is a problem.
I want it to render in such a way that it will display the data in a comprehensible way no matter the size of the input file, i.e. it should be dynamic.
I know that data.length is the number of rows- but- what is meant by "rows", the number of lines in my input csv?
I've been recommended to use something like chart.setBounds(100, 100, data.length * k, 300) where k should be the height of the label + some margin. What is the best way to determine k?
I suppose that k is related to the y-axis and that really it is, or should be, just set by the maximum value of the inputs and that there isn't really much else I can do about that. Is it so?
I've been playing around with trying different values heuristically, i.e. trial and error- but that is clearly suboptimal.
What's a maintainable and effective way of always generating a map where the indices of the x-axis are all clearly readable and the y-axis is determined by the max value of inputs?
Here is the code I'm using to generate the bar chart.
<!DOCTYPE html>
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<script type="text/javascript">
function draw(data) {
"use strict";
var margin = 75,
width = 9000 - margin,
height = 600 - margin;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
var chart = new dimple.chart(svg,data);
chart.setBounds(100, 100, 500, 300);
var x = chart.addCategoryAxis("x", '"loc"');
var y = chart.addMeasureAxis("y", '"title"');
var lines = chart.addSeries(["project"], dimple.bar, [x, y]);
chart.draw();
};
</script>
<body>
<script type="text/javascript">
d3.csv("Germany.csv", draw);
</script>
</body>
</html>
(This is a link to the data file Germany.csv on my GitHub).
Firstly I am iterating over the data that you have provided to remove all double quotes in the key and value of the json like this.
datas = [];
data.forEach(function(d) {
var ob = {};
for (var key in d) {
var k = key.replace(/"/g, "").trim();//remove all double quotes and trim
var v = d[key].replace(/"/g, "").trim();//remove all double quotes and trim
ob[k]=v;
}
datas.push(ob)
})
Then I make the width of the svg based on the data length.
var width = data.length*5 -margin;//5 is a constant width of the text label font
if (width < 500)//set the minimum width in case data set is low.
width =600;
Set the width of svg an d chart like this
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)//set the calcuated width to svg
//set width to the chart object
chart.setBounds(100, 100, width -margin, 300);
working code 110 points here
working code with all points here
这篇关于自动设置d3 / dimple数据可视化的尺寸以便清晰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
