Question

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

但是，作为块元素的g从新的垂直层开始。

除了“ 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%"

我正在尝试将[全部]映射到一种颜色的div数量。

d3使g在同一行上继续

0 个答案: