javascript - D3 : Bar chart coloring

标签 javascript d3.js graph colors color-picker

我在 D3 中有一个包含 x 和 y 值的条形图,我想根据 y 的值为条形着色。如果 y 小于 6 那么它应该是一种颜色,否则我想要另一种颜色。

到目前为止,这是我的代码。这仅适用于一个值。

var data = [
                                            {x: 2, y:  4},
                                            {x: 5, y:  8},
                                            {x: 8, y: 10}
                                        ];

  bars.selectAll(".rect")
                                            .data(data)
                                            .enter().append("rect")
                                            .attr("class", "rect")
                                            .attr("x", function(d) { return x(d.x); })
                                            .attr("y", function(d) { return y(d.y); })
                                            .attr("height", function(d) { return h - y(d.y); })
                                            .attr("width", 15)
                                            .attr("fill", function(d){
                                                return colorPicker(d);
                                            });

                                        function colorPicker(v){
                                            if(v<=6) { return "#666666"}
                                            else if (v > 6){ return "#FF0033";}

                                        }

你知道我应该如何改变它吗?提前致谢!

最佳答案

根据该规则设置颜色的最简单方法是使用 ternary operator :

.attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

查看演示:

var w = 300, h = 100, padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var data = [{name: "foo", y:10},
            {name: "bar", y:30},
            {name: "baz", y: 5}];

var xScale = d3.scaleBand()
  .range([0,w])
  .domain(data.map(function(d){ return d.name}))
  .paddingInner(0.2)
  .paddingOuter(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, 0])
  .domain([0, d3.max(data, function(d){ return d.y})]);

var xAxis = d3.axisBottom(xScale);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.name)})
  .attr("width", xScale.bandwidth())
  .attr("y", function(d){ return yScale(d.y)})
  .attr("height", function(d){ return h - padding - yScale(d.y)})
  .attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

但是,如果您想保留该功能,则必须使用 d.y 作为参数调用 colorPicker,而不是 d:

colorPicker(d.y)

查看演示:

var w = 300, h = 100, padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var data = [{name: "foo", y:10},
            {name: "bar", y:30},
            {name: "baz", y: 5}];

var xScale = d3.scaleBand()
  .range([0,w])
  .domain(data.map(function(d){ return d.name}))
  .paddingInner(0.2)
  .paddingOuter(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, 0])
  .domain([0, d3.max(data, function(d){ return d.y})]);

var xAxis = d3.axisBottom(xScale);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.name)})
  .attr("width", xScale.bandwidth())
  .attr("y", function(d){ return yScale(d.y)})
  .attr("height", function(d){ return h - padding - yScale(d.y)})
  .attr("fill", function(d){return colorPicker(d.y);});

function colorPicker(v){
 if(v<6) { return "#666666"}
 else{ return "#FF0033";}}

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

关于javascript - D3 : Bar chart coloring,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40466254/

相关文章:

javascript - 为什么语义 ui 在 Angular ng-include 部分中隐藏内容?

javascript - 试图了解 javascript d3js 框架中的转换方法?

algorithm - BFS修改

php 为多个项目输出 javascript

javascript - 如何检测文本区域或输入类型="text"编辑?

javascript - 如何将我的 map 置于容器的中心并调整大小以使其占据整个容器?

mysql - d3js : data/column required for time series chart with dropdown list

python - 这段代码有Python函数吗?

algorithm - 在连通图中查找具有最大分离度的节点的有效方法

javascript - 填写后自动提交单一表单输入框