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包括多种风格

1 个答案: