Question

我有一个图形，可以在其中添加一条平线：

  svg.append("line")          // attach a line
    .style("stroke", "black")
    .attr("x", 60)     // x position of the first end of the line
    .attr("y1", 60)      // y position of the first end of the line
    .attr("x2", 60)     // x position of the second end of the line
    .attr("y2", 60);

但是，这仅跨过图表的1/3。如何添加一条将一直延伸到图形长的扁平线？谢谢

Answer 1

我假设您至少在日期轴上使用了刻度，所以我会这样做：

// Scales
const xScale = d3.scaleTime()
  .range([0, 400])
  .domain(d3.extent(data, d => new Date(d.date)))
const yScale = d3.scaleLinear()
  .range([600, 0])
  .domain([0, 100])

svg.append("line")
  .style("stroke", "black")
  .attr('x1', 0)
  .attr('x2', 400)
  .attr('y1', yScale(60))
  .attr('y2', yScale(60))

Answer 2

您可以使用生成的折线图生成的范围函数将线添加到完整图形中。

line_straight = svg.append("line")          // attach a line
                  .style("stroke", "black")
                  .attr("x", 0)     // x position of the first end of the line
                  .attr("y1", yScale(0.8))      // y position of the first end of the line
                  .attr("x2", xScale(n-1))     // x position of the second end of the line
                  .attr("y2", yScale(0.8));

下面我附上我的代码。这是代码的jsfiddle。 https://jsfiddle.net/nmks14ub/1/

// 2. Use the margin convention practice 
var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 21;

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
    .domain([0, n-1]) // input
    .range([0, width]); // output

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()
    .domain([0, 1]) // input 
    .range([height, 0]); // output 

// 7. d3's line generator
var line = d3.line()
    .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator 
    .curve(d3.curveLinear) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number


var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

// 1. Add the SVG to the page and employ #2
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 3. Call the x axis in a group tag
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

line_straight = svg.append("line")          // attach a line
                  .style("stroke", "black")
                  .attr("x", 0)     // x position of the first end of the line
                  .attr("y1", yScale(0.8))      // y position of the first end of the line
                  .attr("x2", xScale(n-1))     // x position of the second end of the line
                  .attr("y2", yScale(0.8));
                  
// 4. Call the y axis in a group tag
svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator 
svg.append("path")
    .datum(dataset) // 10. Binds data to the line 
    .attr("class", "line") // Assign a class for styling 
    .attr("d", line); // 11. Calls the line generator

.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}
  
.overlay {
  fill: none;
  pointer-events: all;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}
  
  .focus circle {
  fill: none;
  stroke: steelblue;
}

<!DOCTYPE html>
<meta charset="utf-8">
<body>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>

如何在D3.js（版本3.x）中制作一条扁平线

2 个答案: