Question

在他的书中，定量信息的视觉显示 爱德华·图夫特（Edward Tufte）对称为＆＃34; Range Frames＆＃34; - Range Frame Excerpt (image)

在学习D3时，我们被教导可以创建轴，然后将其附加到图表中，并且可以使用range / css属性等对它们应用各种自定义。但是，API似乎不会出现传达一种方法，其中这些可用于限制线本身的范围，也不是用于操纵单个标记的技术。有没有办法这样做？

Answer 1

有趣的问题。这是一个快速实现，仅使用CSS复制您的图像。在这里，我对数字进行了硬编码，但对于实际的实现，我可能会在JavaScript中将其应用于动态。

<!DOCTYPE html>
<svg width="500" height="150"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

<style>
  .two>path{
    stroke-dasharray: 0,30,380;
  }
  
  .three>path{
    stroke-dasharray: 0,5,455;
  }
  
  .three>g:nth-of-type(1)>line{
    stroke: none;
  }
  
  .three>g:nth-last-of-type(1)>line{
    opacity: 0;
  }
</style>


<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var x = d3.scaleLinear()
    .domain([0, 50])
    .range([0, width]);

var xAxis = d3.axisBottom(x);

g.append("g")
    .attr("transform", "translate(0," + 10 + ")")
    .call(xAxis);
    
var two = g.append("g")
    .attr("class", "two")
    .attr("transform", "translate(0," + 60 + ")")
    .call(xAxis);
    
var three = g.append("g")
    .attr("class", "three")
    .attr("transform", "translate(0," + 110 + ")")
    .call(xAxis);
    
two.select('path')

</script>

这是第二个动态实现：

<!DOCTYPE html>
<svg width="500" height="150"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
  var svg = d3.select("svg"),
    margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scaleLinear()
    .domain([0, 50])
    .range([0, width]);

  var xAxis = d3.axisBottom(x);

  var two = g.append("g")
    .attr("class", "two")
    .attr("transform", "translate(0," + 60 + ")")
    .call(xAxis);

  // say you want the line to start at 4 and stop to 46
  two.select('path')
    .attr("d", "M" + x(4) + ",0.6V0.5H" + x(46));
</script>

D3.js中的范围框架轴

1 个答案: