javascript - d3 使 g 在同一行继续-6ren

javascript - d3 使 g 在同一行继续

转载作者：行者123 更新时间：2023-11-28 01:08:13

27

4

我正在尝试创建一个 dot matrix graph从头开始。我的方法是为每个类别类型添加一个组，然后创建等量的 div。

然而，作为 block 元素的 g 开始作为一个新的垂直层。

Current Implementation

除了“g”之外，还有其他方法可以对内部元素进行分组/循环吗？ (类似于“跨度”)

我当前的代码:

<body>
    <div id="container" class="svg_container">
        <div class="all">
        </div>
        <div class="graph">
        </div>
    </div>
</body>
<style>
    #container{
    width: 90%;
    height: 50%;
    margin: auto;
    //border: 1px solid red;
    padding:0;
    }
    .all{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 250px;
        justify-content: space-between;


    }

    .g{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }
    .cell{
        width:20px;
        height: 20px;
        //margin-top: 2px;
        border-radius: 50px;
        margin: 0.5%;
        border: 1px solid blue;

    }
</style>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
 <body>
    <div id="container" class="svg_container">
        <div class="all">
        </div>
        <div class="graph">
        </div>
    </div>
</body>
<style>
    #container{
    width: 90%;
    height: 50%;
    margin: auto;
    //border: 1px solid red;
    padding:0;
    }
    .all{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 250px;
        justify-content: space-between;


    }

    .g{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }
    .cell{
        width:20px;
        height: 20px;
        //margin-top: 2px;
        border-radius: 50px;
        margin: 0.5%;
        border: 1px solid blue;

    }
</style>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
 var colors= ["#4194CA","#31ADB9","#77D8B5","#BAE3C3","#EFFFD0"];
 d3.csv("data.csv", data =>{
        console.log(data);

    d3.select(".graph").selectAll("g")
          .data(data)
          .enter()
          .append("g")
          .classed("g", "true")
          .style("background-color", (d,i) => colors[i])
          .selectAll("div")
          .data(d =>[...Array(parseInt(d.All)).keys()])
          .enter()
          .append("div")
          .classed("cell", "true")
          .style("background-color", "inherit");

         })

</script>

添加数据格式示例(一行):

18 - 34:"29%"
35 - 64:"42%"
65 and up:"37%"
All:"37%"

我正在尝试将 [All] 映射到颜色中的 div 数量。

最佳答案

您的主要问题是您要为每行数据创建一个父 g 元素:您希望所有 div 都在同一个父对象中。您有多种选择可供选择。一种可能是展平你的阵列，例如，从 [[1,2,...,37], [1,2,...,24], ...] 到 [0,0,...,0,1,..1, 2,...]

你的代码可以是

var colors= ["#4194CA","#31ADB9","#77D8B5","#BAE3C3","#EFFFD0"];
 d3.csv("data.csv", data =>{
        console.log(data);
        var newdata = d3.merge(data.map((d, i)=>d3.range(parseInt(d.All)).map(v=>i)));
        console.log(newdata);

d3.select(".graph").append("g").attr('class','g')
      .selectAll("div")
      .data(newdata)
      .enter()
      .append("div")
      .classed("cell", "true")
      .style("background-color", d=>colors[d]);

     })

`

关于javascript - d3 使 g 在同一行继续，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52255599/

27

4

0

文章推荐： javascript - 将特定表格单元格放入数组

文章推荐： javascript - 向服务器发出 AJAX 请求时出现错误代码 415

文章推荐： javascript - 当选择元素被下拉时是否触发事件

文章推荐： css - WP PageNavi 不接受 CSS 文件

g++ - 如何构建 g++
我目前正在尝试让 g++ 工作，并查看 http://gcc.gnu.org/install/build.html ，我似乎找不到它在哪里说如何“执行编译器的 3 阶段 bootstrap ”。我在哪
Python:理解(None for g in g if (yield from g) and False)
James Powell 在他对即将举行的演示文稿的简短描述中说，他自豪地发明了最粗糙的 Python 单行代码之一: (None for g in g if (yield from g) and F
graph-theory - 证明如果 G 的深度优先搜索树等于 G 的广度优先搜索树则 G 是树
请告诉我我的证明是否正确 We have a connected graph, and specific vertex u in V(G). Suppose we compute the dfs tr
powershell - PowerShell “$g = $json | ConvertFrom-Json | Group State”结果与 “$g = $json | ConvertFrom-Json ; $g = $g | Group State ;”不同
下面的test2和test3结果是不同的。我对此感到困惑，因为它看起来像相同的逻辑，并且与linux bash ||逻辑不同。 $data = @( [PSCustomObject]@{St
g-code - 寻找 G Code 语法规范，尝试制作简单的 G Code 解析器
我试图找到一个明确的 G 代码语法规范，而不是单个 G 代码的含义，我无处不在的规范，我的意思是详细的语法规范，目的是编写解析器。我编写解析器没有问题，我只是在寻找语法规范，例如。我知道您不必总是为
css - 为 g 推荐别的东西为 g 推荐别的东西为 g 推荐别的东西
我写了这个 mixin，但它循环了很多时间。你能帮我优化我的代码吗？或者你能建议一些其他的东西来获得想要的结果吗？ dfgdfgsdfgsdf 最佳答案希望这就是您要找的。 $spaces: (4,
g++ - 强制 g++ 为未使用的函数生成代码
默认情况下，g++ 似乎会省略未使用的类内定义方法的代码。示例 from my previous question : struct Foo { void bar() {} void baz(
g++ - 在 g++ 中管道文件内容进行编译
是否可以将文件内容通过管道传送到 g++编译程序？我想这样做是因为我想使用数据库中的文件而不是磁盘上的物理文件。可以通过我制作的 API 轻松检索文件内容。例如，我想做这样的事情: g++ con
g++ - 使用 g++ 进行分析
如何profile c++代码获取每行代码的调用次数和消耗时间，就像profile工具一样在 Matlab 中呢？我尝试使用-fprofile-arcs之类的东西，但它只生成代码覆盖率报告，其中可以
g++ - 如何通过几行代码禁用 g++ 中的所有警告
如何在几行代码上禁用所有警告。可以使用 GCC 诊断功能禁用特定警告，但是否有针对所有警告的标志。我尝试了这个方法，但不起作用 #pragma GCC diagnostic push #pragma
g++ - 修复共享库 g++ 上的断开链接
我有一个链接到 opencv 2.2 的可执行文件。但是，我删除了 opencv 2.2 并安装了 opencv 2.3。问题是，有没有办法在不重新编译整个源代码的情况下将这个可执行文件链接到新的共
g++ - 是否可以在 g++ 中启用数组边界检查？
在编译带有一些标志的以下文件时，是否可以让 g++ 显示错误？ #include using namespace std; int main() { int arr[ 2 ]; cout
haskell - 找到 Haskell 函数 f, g 使得 f g = f 。 G
在学习 Haskell 时，我遇到了一个挑战，要找到两个函数 f 和 g，例如 f g 和 f 。 g 是等价的(并且是总计，因此像 f = undefined 或 f = (.) f 这样的东西不算
algorithm - 如何证明 Θ(g(n)) = O(g(n)) ∩ Ω(g(n))
根据我的理解，Theta 位于 Big O 和 Omega 之间，但我看到了这个声明，但我无法理解为什么交集会出现在这里。我能否对 Θ(g(n)) = O(g(n)) ∩ Ω(g(n)) 获得数学和分
c - 递归函数到迭代，该函数给定 g(n) = 2*g(n-1)+3*g(n-2)
我需要为这个递归函数编写一个迭代函数。 int funcRec(int n){ if(n>1) { return 2*funcRec(n - 1) + 3*funcRec(n
c++ - g++、clang++、使用 libboost 的编译花絮——当 g++7 成功时，g++8 编译失败；
我在 github repository 上有代码示例并在 travis-ci 上创建了一个构建便于复制。最小的、完整的和可验证的例子可能不是最小的，但我相信它足够小它使用 boost.inte
haskell - f, g, h::Kleisli ((->) e) a b <=> f >>> (g &&& h) = (f >>> g) &&& (f >>> h)？
编辑:我们将调用箭头 p纯如果存在这样的函数f即:p = arr f . 我试图更好地掌握 Haskell 中的 Arrows，我想弄清楚什么时候 f >>> (g &&& h) = (f >>> g
Scalaz monad 转换器。将 f1 :A => G[B], f2:B => G[C] 函数应用于 F[G[A]] 对象
我有两个(或更多)函数定义为: val functionM: String => Option[Int] = s => Some(s.length) val functionM2: Int => Op
algorithm - 在渐近符号中，给定 g(n)，O(g(n)) 和 Ω(g(n)) 的并集是所有函数的通用集 U 吗？
好像是的。任何直观或严肃的证据都值得赞赏。最佳答案没有。我认为您的问题等同于:给定函数 f 和 g，f 是 O(g) 或 g 是 O(f) 是否总是正确的？这在 SE Computer Scie
algorithm - 如果 f(n) = o(g(n))，g(n) + f(n)=Θ(g(n)) 吗？
如果我设法证明 f(n) = o(g(n))(小 o)，那么这两个函数的总和 f( n) + g(n) 应该被“更大”的函数 g(n) 紧紧束缚。然而，我在证明这一点时遇到了一些麻烦。最佳答案以

首页

博学

6Ren·AI

商城

javascript - d3 使 g 在同一行继续