Question

我认为d3让一个非常简单的工作变得非常复杂。

我希望用d3和typeScript制作月度表。

我找到了一个解决方案，我可以看到10天，但这不是动态日历，而是硬编码。

我看了很多，我找到的只是this one ..

[jsfiddle][1]

我怎样才能将这个日历作为一个日历将在一行中的每月日历...

任何人都知道这个问题的任何解决方案！

我想使用d3的原因是因为我需要该表中的数据，这将始终是integer。

所以数据类型 - 整数

数据来源 - CSV

D3问题 - How can i make a calendar with all days in one row

Answer 1

好的，所以我终于找到了一些时间。

我必须承认，只有在重读了这个问题之后，才意识到你需要一个打字稿的答案。我不知道打字稿，但无论如何我都会给出答案，因为我猜主要问题是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数据，以便只保留值。为了完全理解我的意思，你应该在＆＃39;数据＆＃39;上做一个console.log（）。你从回调得到的参数。然后你就会明白d3.csv函数的结果对象是什么。

我做了两个例子：1是html方式，另一个是使用svg方式。无论如何，D3的工作方式相同。

要完成，我将解释以下代码：

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;});

所以，你在这里看到的是d3选择DOM元素并将它们绑定到给定的数据。你可能想知道以下内容：你是什么意思，选择DOM元素？当你选择它们时，那些元素甚至还没有出现！

你是对的。这是D3的一个难点，了解它的选择。使用D3进行选择可以在两种情况下理解：

1）您选择的DOM元素实际上就在那里。这个上下文是最直接的：选择包含实际的dom元素。这感觉有点像jQuery。你用它们做什么可以非常简单（比如改变一个类或者什么），或者它可以取决于你想要绑定的数据或者已经绑定到它们的数据。有关数据绑定的更多内容。

2）您选择的DOM元素在DOM中（尚未）。这感觉很奇怪，对吗？当您选择不在DOM中的DOM元素时，您的上下文就是数据。在这种情况下，您需要考虑： DOM中还没有哪些元素，但我真的想在DOM中使用它吗？根据您将绑定到选择的数据，D3将创建它们为了你。这就是代码中的内容：

var tablerows = table.selectAll(".data")
                       .data(values)
                       .enter()
                       .append("tr")
                       .attr({
                         class:"data"
                       });

你基本上可以像这样翻译这段代码：我正在选择DOM中的所有元素（或者还没有在dom中），这些元素具有类＆＃34;数据＆＃34;。对于那个选择，我绑定数据（数组值，包含2个元素）。我需要d3来检查我的数据并检查需要向DOM添加多少元素。由于没有＆＃39; .data＆＃39;那里的元素，我的数据数组中有2个项目，append（）函数将向DOM添加2个元素。使用attr，我可以指定DOM元素的细节。

然后只有数据绑定点，我只会触摸它（因为我不太了解它或者tbh）。检查一下：

var cells = tablerows.selectAll("td")
                        .data(function(d){return d;})
                        .enter()
                        .append("td")
                        .text(function(d) {return d;});

d 的全部内容是什么？这是绑定到＆＃34; g＆＃34;上一段代码中的元素。在那段代码中，我创建了2＆＃34; g＆＃34;元素，因为我绑定了一个数组容器2其他数组到我的选择。 D3真的将这些数据绑定到您的元素。＆＃34;值＆＃34;内的数据片段数组碰巧是数组本身！所以，每一个＆＃34; g＆＃34;由D3创建的元素将绑定到这样的数组。 ＆＃34; d＆＃34; 是您在函数中访问该数据的方式。所以这一行：

.data(function(d){return d;})

意味着：我想绑定到我的选择：绑定到父元素的数据（好吧，它可能不完全一样，但为了开始理解D3，我认为它足够接近）。

所以要稍微介绍一下：你应该了解D3，选择和数据：

D3会检查您的选择，并对DOM中已有的元素进行一些计数。然后计算要绑定到选择的数据元素的数量。

假设您在DOM中选择了2个元素，而您的数据包含4个元素，这意味着您有 2＆＃39;要素 。这些元素有时被称为＆＃39;输入选择＆＃39; 。您可以通过执行.enter（）函数来访问这些元素。您可以选择如何处理它们，但大多数情况下，您将添加它们。

假设您在DOM中选择了4个元素，但您的数据只包含2个元素，那么您有 2个要删除的元素，或者有时称为“退出选择”＃。大多数情况下，您将对这些元素使用.remove（）以使它们脱离DOM。

如果在DOM中选择了4个元素，并且您的数据有4个项目，那么您可以使用要绑定到它们的数据更新所选DOM元素。这称为＆＃39;更新选择＆＃39; 。

我希望它有所帮助，如果您有更多问题，请询问！

用d3和typeScript绘制一个表

1 个答案: