Javascript d3使g在同一条线上继续_Javascript_Css_D3.js

Javascript d3使g在同一条线上继续

javascript css d3.js

Javascript d3使g在同一条线上继续,javascript,css,d3.js,Javascript,Css,D3.js,我试图从头开始创造一个新的世界。我的方法是为每个类别类型添加一个组，然后创建相等数量的div 然而，作为块元素，g从一个新的垂直层开始除了“g”之外，还有其他方法可以对内部元素进行分组/循环吗？（类似于“span”）我当前的代码： <body> <div id="container" class="svg_container"> <div class="all"> </div> <

我试图从头开始创造一个新的世界。我的方法是为每个类别类型添加一个组，然后创建相等数量的div

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

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

我当前的代码：

<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>

我正在尝试将[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]);

     })

编辑代码并删除重复内容。从何时起，

被允许是

div

的子项和

div

被允许是

的子项？将所有标记转储到一个组中，并使用正确的颜色对单个标记的背景进行着色。也许

d3.range

比

Array

要简单得多。你能详细说明一下吗？即使我添加了d3.range，我如何为每个div创建特定数量的div？编辑问题以添加数据格式和我尝试执行的操作。请检查，您是否遇到了

d3缩放点

？不太确定你想从零开始做多少。我在你的数据样本中没有看到多少CSV。

paseInt

处理

是否正确？

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

     })