D3js包含多个样式

这是我写的代码-

<!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岁以上，颜色应该是红色。我已经在一个单独的代码中尝试了颜色部分，它是工作的，但是当我在这里尝试它时，它不工作。删除颜色部分，高度工作正常。

如何添加两个样式属性?请帮助。

1)用background-color代替color

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";
            }
        });

这里的工作代码

相关内容

最新更新

热门标签：