使用d3和typeScript绘制表 [英] Draw a table with d3 and typeScript
问题描述
我认为d3让一个非常简单的工作真的很复杂。
我想用d3和typeScript制作每月表。
我发现一个解决方案，我可以看到10天，但这不是一个动态日历，这是硬编码。
我看过很多，我发现是这一个 ..
[jsfiddle] [1]
strong>我如何使这个月度日历，其中所有的日子将在一行..
任何人都知道这个问题的任何解决方案！ / p>
我要使用d3的原因是因为我需要该表中的数据，它总是 integer 。
因此数据类型 - 整数
数据源 - CSV
问题D3 - 如何制作一行中的所有日历
好的，所以我终于找到了一些时间。
我必须承认，只有在重读了问题后，我意识到你需要一个答案在打字稿。我不知道打字稿，但我要给一个答案，无论如何，因为我猜想主要的问题是D3，特别是那么csv部分。如果我错了，我可以删除这个答案，但我想，一个答案是接近你想要的，更好，然后没有答案。
这是 plunker 。演示看起来非常像你连接的小提琴。但让我解释一下：
让我们来看看代码。
d3.csv（data.csv，function（data）{...}
这行基本上是D3访问csv文件的方法。请记住，如果你在本机上尝试这个，违反同源策略，示例将不起作用。
您还将注意到所有D3代码都在此.csv回调函数中，原因是它是异步执行的。
其他是非常简单的：
var values = [];
var keys = []
data.forEach（function（item）{
keys = d3.keys（item）;
var array = [ ]
for（var key in item）{
array.push（item [key]）;
}
values.push（array）;
}
这些行将提取csv标题（我称之为键），它也将过滤结果。 csv数据，以便只剩下值。为了完全理解我的意思是什么，你应该在从回调中获得的'data'参数上做一个console.log（）。然后你会明白d3.csv函数的结果对象。
我做了2个例子：1是html的方式，另一个是使用svg的方式。在任何情况下，D3的工作原理相同。
完成后，我将解释下面的代码：
var tablerows = table.selectAll（。data）
.data（values）
.enter（）
.append（tr）
.attr b $ b class：data
}）;
var cells = tablerows.selectAll（td）
.data（function（d）{return d;}）
.enter （td）
.text（function（d）{return d;}）;
所以，你看到的是d3选择DOM元素并将它们绑定到给定的数据。您可能想知道以下内容：您是什么意思，选择DOM元素？这些元素在您选择它们时还没有！
你是对的。这是D3的硬性部分之一，了解它的选择。选择D3可以在2个上下文中理解：
1）您选择的DOM元素实际上在那里。这个上下文是最直接的：选择包含实际的dom元素。这感觉有点像jQuery。你对它们做什么可以非常简单（如更改类或某事），或者它可以取决于要绑定或已绑定到它们的数据。更多关于数据绑定的信息。
2）您选择的DOM元素在DOM中。这感觉奇怪，对吧？当您选择不在DOM中的DOM元素时，您的上下文都是关于数据的。在这种情况下，您需要考虑： DOM中还没有哪些元素，但我真的想在DOM中使用？根据您将绑定到您的选择的数据，D3会创建它们为你。这是它在代码中的行为：
var tablerows = table.selectAll（。data）
。数据（值）
.enter（）
.append（tr）
.attr（{
class：data
}）;
你基本上可以翻译这样的代码：
我选择的所有元素DOM（或尚未在dom中）具有类data。为了选择，我绑定数据（数组值，包含2个元素）。我需要d3来检查我的数据，并检查有多少元素需要添加到DOM。因为还没有'.data'元素，并且在我的数据数组中有2个项目，append（）函数将向DOM添加2个元素。使用attr，我可以指定DOM元素的细节。
然后只有数据绑定的点，我只会触摸lightely（因为我不' t知道所有那么多关于它或者tbh）。请检查：
var cells = tablerows.selectAll（td）
.data（function（d）{ return d;}）
.enter（）
.append（td）
.text（function（d）{return d;}）;
d 是什么？这是绑定到来自前一段代码的g个元素的数据。在这段代码中，我创建了2个g元素，因为我绑定了一个数组容器2其他数组到我的选择。 D3真的将这些数据绑定到你的元素。 value数组里面的数据块是数组本身！因此，D3创建的每个g元素都会有一个数组绑定到它。 d是您如何访问函数中的数据。所以这一行：
.data（function（d）{return d;}）
意味着：我想绑定到我的选择：数据绑定到父元素（嗯，可能不是完全一样，为了开始理解D3一点，我认为它足够近）。
因此，为了包装这一点：你应该知道D3，选择和数据：
D3检查您的选择，并对DOM中已经存在的元素进行计数。然后它计算要绑定到您的选择的数据元素的数量。
假设您在DOM中选择了2个元素，而您的数据包含4个元素，则表示您有 2个元素待定 。这些元素有时称为输入选择。您可以通过执行.enter（）函数来访问这些元素。
假设您在DOM中选择了4个元素，但您的数据只包含2，您有 2个要移除的元素，或者有时称为退出选择。大多数情况下，您将在这些元素上使用.remove（） DOM。
当您在DOM中选择4个元素，并且您的数据有4个项目时，您可以使用要绑定到它们的数据更新所选的DOM元素。这称为更新选择。
我希望它有所帮助，如果您有更多问题，请问！
i think d3 makes a really simple work really complicated.
i am looking to make a monthly table with d3 and typeScript.
i have found a solution where i can see 10 days but that is not a dynamic calender, that is hard coded.
i have looked a lot and all i found is this one ..
[jsfiddle][1]
How can i make this a monthly calender where all the days will be in one row ..
Any one knows any solution to this problem !
The reason why I want to using d3 because I need data inside of that table, which will be always integer.
So data type - `integer
Data Source - CSV
Problem With D3 - How can i make a calendar with all days in one row
Ok, so I finally found some time.
I must admit, it was only after rereading the question, that i realized you need an answer in typescript. I don't know typescript, but I am going to give an answer anyway, since I guess the main problem is D3, especially then the csv part. If I am wrong, I can delete this answer, but I figured that one answer that is close to what you want, is better then no answer at all.
This is the plunker. The demo looks very much like the fiddle you linked. But let me explain a bit:
Lets go through the code.
d3.csv("data.csv", function(data){...}
This line is basically a way of D3 to access csv files. Do mind, if you try this locally on your machine, you will unknowingly violate the same-origin-policy and the example will not work.
You will also notice that all the D3 code is in this .csv callback function, the reason being that it is performed asynchronously.
The rest is pretty straightforward actually:
var values = [];
var keys = []
data.forEach(function(item){
keys = d3.keys(item);
var array = []
for(var key in item) {
array.push(item[key]);
}
values.push(array);
});
These lines will extract the csv header (which i called keys) and it will also filter the resulting .csv data so that only the values remain. In order to fully understand what i mean by this, you should do a console.log() on the 'data' parameter you get from the callback. Then you will understand what the result object of the d3.csv function.
I made 2 examples: 1 is the html way, the other is using the svg way. In any case, D3 works the same.
To finish, i ll explain the following piece of code:
var tablerows = table.selectAll(".data")
.data(values)
.enter()
.append("tr")
.attr({
class:"data"
});
var cells = tablerows.selectAll("td")
.data(function(d){return d;})
.enter()
.append("td")
.text(function(d) {return d;});
So, what you see here is d3 selecting DOM elements and bind them to that given data. You probably wonder about the following: How do you mean, selecting DOM elements? Those elements are not even there yet at the time you select them!
And you are right. This is one of the hard parts of D3, understanding its selections. Selecting with D3 can be understood in 2 contexts:
1) The DOM elements you are selecting are actually there. This context is the most straightforward one: the selection contains the actual dom elements. This feels a bit like jQuery. What you do with them can be very simple (like changing a class or something) or it can be depending on the data you want to bind or had already bound to them. More on data binding a bit further.
2) The DOM elements you are selecting are in the DOM (yet). This feels weird, right? When you select DOM elements that are not in the DOM, then your context is all about data. In this situation you need to think: What elements are not in the DOM yet, but would i really like to have in the DOM? Depending on the data you will bind to your selection, D3 will create them for you. This is how it goes in the code:
var tablerows = table.selectAll(".data")
.data(values)
.enter()
.append("tr")
.attr({
class:"data"
});
You can basically translate this code like this: I am selecting all the elements in the DOM (or not yet in the dom) that have the class "data". To that selection, I bind data (the array values, which contains 2 elements). I need d3 to check my data and check how many elements need to be added to the DOM. Since there are no '.data' elements there yet, and there are 2 items in my data array, the append() function will add 2 elements to the DOM. With the attr, i can specify the details of the DOM element.
Then there is only the point of data binding, which I will only touch lightely (because I don't know all that much about it either tbh). Check this:
var cells = tablerows.selectAll("td")
.data(function(d){return d;})
.enter()
.append("td")
.text(function(d) {return d;});
What is the d all about? That is the data bound to "g" elements from the previous piece of code. In that piece of code, I created 2 "g" elements, because i bound an array container 2 other arrays to my selection. D3 really binds this data to your elements. The pieces of data inside the "value" array happen to be arrays themselves! So, every "g" element created by D3 will have such an array bound to it. The "d" is how you would access that data in a function. So this line:
.data(function(d){return d;})
means: i want to bind to my selection: the data bound to the parent element (well, it may not be exactly like that, but in order to start to understand D3 a bit, i think its close enough).
So to wrap this up a little bit: what you should know about D3, selections and data:
D3 checks your selection and somewhat counts the elements that are already in the DOM. Then it counts the amount of data elements you want to bind to your selection.
Suppose you have selected 2 elements in the DOM and your data contains 4 elements, that means you have 2 'elements-to-be'. Those elements-to-be are sometimes called 'the enter selection'. You can reach those elements by doing the .enter() function. You can choose what to do with them, but most of the time, you will be appending them.
Suppose you have selected 4 elements in the DOM but your data only contains 2, you have 2 elements-to-be-removed, or sometimes called the 'exit selection'. Most of the time, you will be using .remove() on those elements to get them out of the DOM.
When you have 4 elements selected in the DOM, and your data has 4 items, then you can update the selected DOM elements with the data you want to bind to them. This is called the 'update selection'.
I hope it helped out, if you have more questions, please ask!
这篇关于使用d3和typeScript绘制表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
