Question

我想在这里绘制一个非常基本的图表。我想要实现的有点像这样：

每个＆＃34;子图＆＃34;包含4个数据点。

所需的结构是：

 .chart
  .chart__graph
    .chart__graph__exp1
    .chart__graph__exp2
    .chart__graph__opt
    .chart__graph__min
  .chart__graph
    .chart__graph__exp1
    .chart__graph__exp2
    .chart__graph__opt
    .chart__graph__min
  .chart__graph
    ....

这是我的方法：

    var data = [
        {
            minimum: 4,
            optimum: 7,
            company: 6,
            competitor: 6
        },
        {
            minimum: 2,
            optimum: 4,
            company: 4,
            competitor:3
        },
        {
            minimum: 3,
            optimum: 7,
            company: 6,
            competitor: 3
        }
    ]

    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__min").html(function(d) { return d.minimum; });
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__exp1").html(function(d) { return d.company; })
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__exp2").html(function(d) { return d.competitor; })
    d3.select(".chart").selectAll(".chart__graph")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt").html(function(d) { return d.optimum; })

根据文档/教程我希望它创建一个细分，但它似乎完全忽略.selectAll（＆＃34; .chart__graph＆＃34;）。如果我手动.append() div，那么它会为每个不需要的直通创建子文件。为了实现我想要的div结构，我错过了什么？另外，selectAll()实际上做了什么？

请不要介意重复的代码，现在试着绕过D3.js语法。

Answer 1

您必须在输入中附加@Embeddable public class CatAdvId implements Serializable { private static final long serialVersionUID = 1L; private static final int THIRTYTWO = 32; private static final int THIRTYTHREE = 32; private long categoryId; private long adId; public CatAdvId() { } public CatAdvId(long categoryId, long adId) { this.categoryId = categoryId; this.adId = adId; } /* (non-Javadoc) * @see java.lang.Object#hashCode() */ @Override public int hashCode() { final int prime = 31; int result = 1; result = prime * result + (int) (adId ^ (adId >>> THIRTYTWO)); result = prime * result + (int) (categoryId ^ (categoryId >>> THIRTYTHREE)); return result; } /* (non-Javadoc) * @see java.lang.Object#equals(java.lang.Object) */ @Override public boolean equals(Object obj) { if (this == obj) return true; if (obj == null) return false; if (getClass() != obj.getClass()) return false; CatAdvId other = (CatAdvId) obj; if (adId != other.adId) return false; if (categoryId != other.categoryId) return false; return true; } }类div，然后创建子div。

chart__graph

Answer 2

而不是：

d3.select(".chart").selectAll(".chart__graph")//this is a wrong selection
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")

应该是

d3.select(".chart").selectAll(".chart__graph__opt")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")

这是做什么的：

1）d3.select(".chart") //this will select the DOM with class chart

2）d3.select(".chart").selectAll(".chart__graph__opt")

这将在选择中使用类chart__graph__opt返回选定的具有类".chart"的元素。最初这将是空选择。

3）

//to this selection set the data and call enter
    d3.select(".chart").selectAll(".chart__graph__opt")
                .data(data)
                .enter()

4）

d3.select(".chart").selectAll(".chart__graph__opt")
        .data(data)
        .enter()
        .append("div").attr("class", "chart__graph__opt")

对于数据集中的每个数据，新div将附加类“chart__graph__opt”（与选择相同）。

希望这能解决一些问题。

Answer 3

＆＃34;全选＆＃34;按标签名称选择节点＆＃34; .chart_graph＆＃34;和d3尝试将新节点附加到＆＃34; .chart＆＃34;对象

d3.js创建和输入元素的意外行为

3 个答案: