javascript - D3js单单杠三种颜色

标签 javascript html css d3.js svg

我正在尝试制作一个 d3js 版本 5 的单杠,其中包含三种颜色:60% 红色、30% 黄色和 10% 绿色。有什么想法吗?

我不确定我是必须创建三个矩形元素并对齐它们,还是创建一个矩形并尝试使用 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>

最佳答案

要按顺序放置矩形,我们可以使用的一种方法是指定每个条的属性(如果我们事先知道它们):

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

有了数据数组中的三个元素,我们可以使用回车选择在 SVG 中放置三个矩形。

我们也可以根据提供的数字 60、30、10,通过一些操作以编程方式导出开始和结束信息,但为了演示,我将只使用上面的数据数组:

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>

如果您真的想要圆 Angular ,我们可以使用剪辑路径 - 因为 rect 的 rx 和 ry 属性应用于所有 Angular :

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)");
<script src="https://d3js.org/d3.v5.min.js"></script>

如果您真的想使用 css 而不是 d3 来设置矩形的样式,您可以指定一个标识符来为条形图着色或使用标准的 css 选择器,例如 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;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

关于javascript - D3js单单杠三种颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51216090/

相关文章:

javascript - 如何在创建一个递增的值(如头寸)时消除可变性?

php - 如何对两个输入字符串进行文件检查?

javascript - JQuery OnClick 在第一次单击时不会更改文本

javascript - Odoo POS javascript 变化

javascript - 想要将日期选择器日历作为对话框打开

javascript - 如何使 1 "oninput"字段产生多个 "output"字段?

css - 左侧和右侧容器不能改变右侧

html - 哪种 CSS lang 语法最适合本地化的 HTML 元素?

html - 如何允许用户通过键盘切换并选择带有可见标签的不可见复选框?

javascript - 重新打开切换开关后重新加载页面