我想将第一个刻度与原点隔开,但也想用一条线连接它们。我想我可以附加一个 svg 来为我做这件事,但必须有一个更简单的方法,我在文档中丢失了。可以找到我的目标图像示例 here
这是我遇到的问题的示例:
var margin = {
top: 20,
right: 10,
bottom: 40,
left: 40
};
var padding = 20;
var height = 100;
var width = 400
var xAxisTimeScale = [];
for(var i = 8; i < 21; i++) {
xAxisTimeScale.push(i);
}
// scales
var xScale = d3.scaleLinear()
.domain([0, 12])
.range([padding, width - padding]);
var yScale = d3.scaleLinear()
.domain([0, 10])
.range([height, 0]);
function convertTimeToString(time) {
if(time > 12) {
return (time - 12) + "PM";
} else {
return time + "AM";
}
}
var xAxis = d3.axisBottom(xScale)
.ticks(13)
.tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);});
var yAxis = d3.axisLeft(yScale);
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 + ")");
// add axes
svg.append('g')
.call(yAxis);
svg.append('g')
.attr('transform', 'translate(0, ' + height + ')')
.call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
最佳答案
以下是我想出的方法:
将 x 轴的
path
的d
属性更改为'M0,0.5V0.5H'+(width-padding)
.相关代码改动:svg.select('.x.axis path.domain').attr('d', function() { return 'M0,0.5V0.5H'+(width-padding); });
我是怎么想出
0.5
的?我分析了d3.js并遇到了用于创建 X 轴域的V0.5
(在 d3-version3 中是V0
。有关如何使用的更多详细信息路径已形成,查看 SVG path d attribute 。使用此偏移量,这是实现相同的代码片段:var margin = { top: 20, right: 10, bottom: 40, left: 40 }; var padding = 20; var height = 100; var width = 400 var xAxisTimeScale = []; for(var i = 8; i < 21; i++) { xAxisTimeScale.push(i); } // scales var xScale = d3.scaleLinear() .domain([0, 12]) .range([padding, width - padding]); var yScale = d3.scaleLinear() .domain([0, 10]) .range([height, 0]); function convertTimeToString(time) { if(time > 12) { return (time - 12) + "PM"; } else { return time + "AM"; } } var xAxis = d3.axisBottom(xScale) .ticks(13) .tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);}); var yAxis = d3.axisLeft(yScale); 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 + ")"); // add axes svg.append('g') .call(yAxis); svg.append('g').classed('x axis', true) .attr('transform', 'translate(0, ' + height + ')') .call(xAxis); svg.select('.x.axis path.domain').attr('d', function() { return 'M0,0.5V0.5H'+(width-padding); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
使用简单的行代码从 X 轴的 origin 明确添加一条线到 start-point。相关代码改动:
svg.append('line').classed('connecting-line', true) .attr('y1', height+0.5).attr('y2', height+0.5).attr('x1', 0).attr('x2', padding).style('stroke', '#000');
0.5
道理同上。其余属性仅基于高度和宽度。这是实现此功能的代码片段:var margin = { top: 20, right: 10, bottom: 40, left: 40 }; var padding = 20; var height = 100; var width = 400 var xAxisTimeScale = []; for(var i = 8; i < 21; i++) { xAxisTimeScale.push(i); } // scales var xScale = d3.scaleLinear() .domain([0, 12]) .range([padding, width - padding]); var yScale = d3.scaleLinear() .domain([0, 10]) .range([height, 0]); function convertTimeToString(time) { if(time > 12) { return (time - 12) + "PM"; } else { return time + "AM"; } } var xAxis = d3.axisBottom(xScale) .ticks(13) .tickFormat(function(d,i){ return convertTimeToString(xAxisTimeScale[i]);}); var yAxis = d3.axisLeft(yScale); 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 + ")"); // add axes svg.append('g') .call(yAxis); svg.append('g').classed('x axis', true) .attr('transform', 'translate(0, ' + height + ')') .call(xAxis); svg.append('line').classed('connecting-line', true) .attr('y1', height+0.5).attr('y2', height+0.5).attr('x1', 0).attr('x2', padding).style('stroke', '#000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
添加一个叠加矩形作为框 或作为使用
stroke-dasharray
样式化的矩形。但我认为这不会那么有用,因为它会有点压倒一切。
希望以上任何一种方法都能达到目的。我真的很抱歉没有按时回来(周五晚上让我):)
关于javascript - d3.js 将底部轴线延伸至原点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48027481/