D3js 包含不止一种样式

Question

这是我编写的代码 -

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<style>
    div.bar{
        display: inline-block;
        width: 20px;
        height: 75px;
        background-color: blue;
        margin-right: 5px;
    }
</style>
<head>
    <title> Simplebar - Out Dataset </title>
    <script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
    <script type="text/javascript">
    d3.csv("officedata.csv", function(data){
            console.log(data);

    d3.select("body")
        .selectAll("div")
        .data(data)
        .enter()
        .append("div")
        .attr("class", "bar")
        .style("height", function(d){
            var bheight = d.age*5; //scales the bar height 10 times
            return bheight + "px";
            })
        .style("color", function(d){
            if( d.age > 30) { return "red"; }
            else { return "blue"; })
    });
    </script>
</body>
</html>

这是 csv 文件 -

name,age
pragyan,23
rashmi,26
tumon,40
debajit,50
dhiraj,19

我想给出一个条件，如果年龄超过 30 岁，颜色应该是红色。我已经在单独的代码中尝试了颜色部分并且它可以工作但是当我在这里尝试时，它不起作用。去掉颜色部分，高度正常。

如何添加两个样式属性？请帮忙

Answer 1

1) 使用背景颜色代替颜色。

2) 通过设置d.age = +d.age使年龄成为一个数字。目前它是一个字符串，因此 d.age > 30 将无法按预期工作。

        .style("background-color", function(d) {
          d.age = +d.age;
            if (d.age > 30) {
              return "red";
            } else {
              return "blue";
            }
        });

工作代码here

D3js 包含不止一种样式

D3js include more than one style

css

styles

colors

d3.js