D3js包括多個樣式

這裏是我寫的代碼 -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歲以上。我已經嘗試了一個單獨的代碼中的顏色部分，它正在工作，但是當我在這裏嘗試它時，它不起作用。去除顏色部分，高度工作得很好。

如何添加兩個樣式屬性？請幫忙。

來源

2016-08-22 Pragyan Bezbaruah

嘗試「背景顏色」而不是「顏色」。 –

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

來源

2016-08-22 06:09:39 Cyril

非常感謝。這工作。好極了！ –

新問題和答案中的Stackoverflow。做到了。再次感謝西里爾。幫了我很多。 :) –

D3js包括多個樣式

回答

相關問題