Question

我跟随着书＃34;使用D3.js构建数据可视化＆＃34;并且根据该书，以下代码应该在1行显示至少3个图像。然而，我的代码显示了垂直堆叠在一起的所有内容。我错过了这本书没有教授的内容。

＆＃13;

var flowers = [{
  "name": "Hydrangia",
  "latin": "Hydrangea",
  "light": "Sun",
  "ease": 3
}, {
  "name": "Chrysanthemum",
  "latin": "Chrysanthemum",
  "light": "Part Sun",
  "ease": 1
}, {
  "name": "Peony",
  "latin": "Paeonia",
  "light": "Part Sun",
  "ease": -1
}, {
  "name": "Orchid",
  "latin": "Paeonia",
  "light": "Shade",
  "ease": -5
}, {
  "name": "Fern",
  "latin": "Dryopteris",
  "light": "Shade",
  "ease": 5
}];

// Part 1
// Creating elements
var div = d3.select("div#content")
  .selectAll("div")
  .data(flowers)
  .enter().append("div").attr("class", "flowers");

＆＃13;

body {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

div#content {
  margin: auto;
  width: 800px;
}

div#content > h1 {
  margin: 20px;
  text-align: center;
}

div#content > div.flower > * {
  margin: 0;
}

div#content div.flower {
  display: inline-block;
  padding: 15px 20px;
  margin: 10px;
  vertical-align: top;
}

div#content div.flower > img {
  width: 200px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content">
  <h1>My Favorite Flowers</h1>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
  <div class="flowers">
    <h2>Hydrangia</h2>
    <p><i>Hydrangea</i></p>
    <img src="img/hydrangia.jpg" />
    <p>Sun</p>
  </div>
</div>

＆＃13;

Answer 1

您只需要声明这种风格：

public class Item {
private String brandId;
private String itemID;
private String purgeLevelCd;
private String purgeDate;

public String getBrandId() {
    return brandId;
}
@XmlElement(name = "BrandId")
public void setBrandId(String brandId) {
    this.brandId = brandId;
}

public String getItemID() {
    return itemID;
}

@XmlElement(name = "ItemID")
public void setItemID(String itemID) {
    this.itemID = itemID;
}
public String getPurgeLevelCd() {
    return purgeLevelCd;
}

@XmlElement(name = "PurgeLevelCd")
public void setPurgeLevelCd(String purgeLevelCd) {
    this.purgeLevelCd = purgeLevelCd;
}

public String getPurgeDate() {
    return purgeDate;
}
@XmlElement(name = "PurgeDate")
public void setPurgeDate(String purgeDate) {
    this.purgeDate = purgeDate;
}
}

并且所有块都在一行中（如果可用空间足够）：

.flowers {
  display: inline-block;
}

var flowers = [
          {
            "name": "Hydrangia",
            "latin": "Hydrangea",
            "light": "Sun",
            "ease": 3
          },
          {
            "name": "Chrysanthemum",
            "latin": "Chrysanthemum",
            "light": "Part Sun",
            "ease": 1
          },
          {
            "name": "Peony",
            "latin": "Paeonia",
            "light": "Part Sun",
            "ease": -1
          },
          {
            "name": "Orchid",
            "latin": "Paeonia",
            "light": "Shade",
            "ease": -5
          },
          {
            "name": "Fern",
            "latin": "Dryopteris",
            "light": "Shade",
            "ease": 5
          }
        ];

        // Part 1
        // Creating elements
        var div = d3.select("div#content")
            .selectAll("div")
            .data(flowers)
            .enter().append("div").attr("class", "flowers");

        body {
            font-size: 16px;
            line-height: 1.5em;
            color: #333333;
            font-family: 'Helvetica Neue',Helvetica,sans-serif;
        }
        div#content {
            margin: auto;
            width: 800px;
        }
        div#content > h1 {
            margin: 20px;
            text-align: center;
        }
        div#content > div.flower > * {
            margin: 0;
        }
        div#content > div.flower {
            display: inline-block;
            padding: 15px 20px;
            margin: 10px;
            vertical-align: top;
        }
        div#content div.flower > img {
            width: 200px;
        }
        
        img {
          width: 100px;
          height: auto;
        }
        
        .flowers {
          display: inline-block;
        }

Answer 2

已修复，您在css中将类命名为错误。

您的HTML引用了类EnvironmentConfiguration，CSS将其命名为flowers。为你修复了CSS！

＆＃13;

flower

＆＃13;

var flowers = [{
  "name": "Hydrangia",
  "latin": "Hydrangea",
  "light": "Sun",
  "ease": 3
}, {
  "name": "Chrysanthemum",
  "latin": "Chrysanthemum",
  "light": "Part Sun",
  "ease": 1
}, {
  "name": "Peony",
  "latin": "Paeonia",
  "light": "Part Sun",
  "ease": -1
}, {
  "name": "Orchid",
  "latin": "Paeonia",
  "light": "Shade",
  "ease": -5
}, {
  "name": "Fern",
  "latin": "Dryopteris",
  "light": "Shade",
  "ease": 5
}];

// Part 1
// Creating elements
var div = d3.select("div#content")
  .selectAll("div")
  .data(flowers)
  .enter().append("div").attr("class", "flowers");

＆＃13;

body {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}

div#content {
  margin: auto;
  width: 800px;
}

div#content>h1 {
  margin: 20px;
  text-align: center;
}

div#content>div.flowers>* {
  margin: 0;
}

div#content div.flowers {
  display: inline-block;
  padding: 15px 20px;
  margin: 10px;
  vertical-align: top;
}

div#content div.flowers>img {
  width: 200px;
}

＆＃13;

水平显示图像

2 个答案: