Question

我正在尝试使用三种颜色制作d3js版本5水平条：60％红色，30％黄色和10％绿色。有什么想法吗？

我不确定是否必须创建三个rect元素并对齐它们或创建一个rect并尝试使用CSS属性更改颜色。我不想使用渐变...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.first {
  fill: #ffff00;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>

<script>
  var svgWidth = 600, svgHeight=400;
  scaleFactor = 20;

  var data = [100];

  var svg = d3.select("body")
  .append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight);

  var x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 300]);

  var bar = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
       return "translate(0," + scaleFactor + ")";
    });

     bar.append("rect")
     .attr("class", "first")
     .attr("width", function(d) {
      return d;
    })         
    .attr("height", 20)
    .attr("rx", 25)
    .attr("ry", 25);  
</script>
</body>
</html>

Answer 1

要顺序放置矩形，我们可以使用的一种方法是指定每个条的属性（如果我们事先知道它们的话）：

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    if (scrollView == scrollPinch){
        if (scrollView.subviews[0].isKind(of: UIImageView.self)){

            return scrollView.subviews[0]
        }
    }
    return nil
}

在数据数组中有3个项目，我们可以使用enter选择将3个矩形放置在SVG中。

我们也可以基于所提供的数字60,30,10，通过一些操作以编程方式得出开始和结束信息，但为了演示起见，我将仅使用上述数据数组：

var data = [
  { start: 90, end: 100, color: "lightgreen" },
  { start: 60, end: 90, color: "yellow" },
  { start: 0, end: 60, color: "crimson" }
];

var svgWidth = 600, svgHeight=400;
  scaleFactor = 20;

var data = [
  { start: 90, end: 100, color: "lightgreen" },
  { start: 60, end: 90, color: "yellow" },
  { start: 0, end: 60, color: "crimson" }
];

var svg = d3.select("body")
 .append("svg")
 .attr("width", svgWidth)
 .attr("height", svgHeight);


var x = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.end; })])
  .range([0, 300]);


var bar = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform","translate(0," + scaleFactor + ")");
    
bar.append("rect")
 .attr("class", "first")
 .attr("width", function(d) {
   return x(d.end - d.start);  // get the width
 }) 
 .attr("x", function(d) {
   return x(d.start);        // get the start position
 })
 .attr("fill", function(d) { return d.color; })
 .attr("height", 20);

如果您确实想要四舍五入，我们可以使用剪切路径-因为<script src="https://d3js.org/d3.v5.min.js"></script>的rx和ry属性应用于所有角落：

rect

var svgWidth = 600, svgHeight=400;
  scaleFactor = 20;

var data = [
  { start: 90, end: 100, color: "lightgreen" },
  { start: 60, end: 90, color: "yellow" },
  { start: 0, end: 60, color: "crimson" }
];

var svg = d3.select("body")
 .append("svg")
 .attr("width", svgWidth)
 .attr("height", svgHeight);


var x = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.end; })])
  .range([0, 300]);


var clip = svg.append("clipPath")
  .attr("id","clip")
  .append("rect")
  .attr("width", 300) // width
  .attr("height", 20)
  .attr("rx", 12)
  .attr("ry", 12);


var bar = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform","translate(0," + scaleFactor + ")");
    
bar.append("rect")
 .attr("class", "first")
 .attr("width", function(d) {
   return x(d.end - d.start);  // get the width
 }) 
 .attr("x", function(d) {
   return x(d.start);        // get the start position
 })
 .attr("fill", function(d) { return d.color; })
 .attr("height", 20)
 .attr("clip-path","url(#clip)");

如果您确实要使用css而不是d3来设置矩形的样式，则可以指定标识符来为条形着色，也可以使用标准的css选择器，例如<script src="https://d3js.org/d3.v5.min.js"></script>：

nth-of-type

var svgWidth = 600, svgHeight=400;
  scaleFactor = 20;

var data = [
  { start: 90, end: 100, id: "green"},
  { start: 60, end: 90, id: "yellow"},
  { start: 0, end: 60, id: "red"}
];

var svg = d3.select("body")
 .append("svg")
 .attr("width", svgWidth)
 .attr("height", svgHeight);


var x = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.end; })])
  .range([0, 300]);


var clip = svg.append("clipPath")
  .attr("id","clip")
  .append("rect")
  .attr("width", 300) // width
  .attr("height", 20)
  .attr("rx", 12)
  .attr("ry", 12);


var bar = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform","translate(0," + scaleFactor + ")");
    
bar.append("rect")
 .attr("class", "first")
 .attr("width", function(d) {
   return x(d.end - d.start);  // get the width
 }) 
 .attr("x", function(d) {
   return x(d.start);        // get the start position
 })
 .attr("id", function(d) { return d.id; })
 .attr("height", 20)
 .attr("clip-path","url(#clip)");

#green {
  fill: lightgreen;
}

#red {
  fill: crimson;
}

#yellow {
  fill: yellow;
}

D3js单横杠三种颜色

1 个答案: