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

Try "цвет фона" вместо "цвета". –

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 включают более одного стиля

ответ

Смежные вопросы