Question

我有一个折线图。并且yAxis的第一个和最后一个刻度显示了外线。

结果如下图：

预期结果是yAxis的每个刻度都显示外线。

示例： https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218

这是我的复制代码：

var margin = { top: 70, right: 30, bottom: 50, left: 40 }
var width = 720 - margin.left - margin.right
var height = 430 - margin.top - margin.bottom

var data = [
   {angle:0.6933744221879815,x:0.1},
   {angle:0.6933744221879815,x:0.1},
   {angle:0.6933744221879815,x:0.3},
   {angle:0.6933744221879815,x:0.4},
   {angle:0.6933744221879815,x:0.4},
   {angle:0.6933744221879815,x:0.5},
   {angle:0.6933744221879815,x:0.7},
   {angle:0.6933744221879815,x:0.8},
   {angle:0.6933744221879815,x:0.8},
   {angle:0.6933744221879815,x:0.9},
   {angle:0.6933744221879815,x:1},
   {angle:0.6933744221879815,x:1.1},
   {angle:0.6933744221879815,x:1.2},
   {angle:0.6933744221879815,x:1.3},
   {angle:0.6933744221879815,x:1.4},
   {angle:0.6933744221879815,x:1.5}
]

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})`)

var x = d3.scaleLinear()
    .range([0, width])
    .domain([data[0].x , data[data.length - 1].x])

var y = d3.scaleLinear()
    .range([height, 0])
    .domain([-30, 120])

var xAxis = d3.axisBottom()
    .scale(x)
    .tickValues(x.ticks(8).concat(x.domain()[0]))
    .tickFormat(d => d +'s')
    .tickPadding(8)
    .tickSizeOuter(0)

var yAxis = d3.axisLeft()
    .scale(y)
    .ticks(8)
    .tickSizeInner(-width)
    .tickSizeOuter(4)
    .tickPadding(8);

var line = d3.line()
    .x(function (d) {
        return x(d.x);
    })
    .y(function (d) {
        return y(d.angle);
    })
    .curve(d3.curveCatmullRom);

svg.append('path')
    .attr('d', line(data))
    .attr('stroke', '#ff5722')
    .attr('stroke-width', '2')
    .attr('fill', 'none');

svg.append('g')
    .call(xAxis)
    .attr('transform', `translate(0, ${height})`)

svg.append('g')
    .call(yAxis)

.tick line{
    opacity: 0.2;
}

.tick text{
    font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 1

没有遗漏的滴答声，所有那些内部的滴答声都在那里！但是，它们位于图表的右侧，因为您这样做：

yAxis.tickSizeInner(-width)

换句话说，您的浅灰色网格线是您的刻度。

如果要保持那些浅灰色网格线和绘制常规刻度线，则必须采取其他方法。像这样：

svg.append('g')
    .call(yAxis)
    .selectAll(".tick")
    .append("line")
    .attr("x2", width)
    .style("stroke", "#eee")

这是您所做的更改的代码：

var margin = { top: 70, right: 30, bottom: 50, left: 40 }
var width = 720 - margin.left - margin.right
var height = 430 - margin.top - margin.bottom

var data = [
   {angle:0.6933744221879815,x:0.1},
   {angle:0.6933744221879815,x:0.1},
   {angle:0.6933744221879815,x:0.3},
   {angle:0.6933744221879815,x:0.4},
   {angle:0.6933744221879815,x:0.4},
   {angle:0.6933744221879815,x:0.5},
   {angle:0.6933744221879815,x:0.7},
   {angle:0.6933744221879815,x:0.8},
   {angle:0.6933744221879815,x:0.8},
   {angle:0.6933744221879815,x:0.9},
   {angle:0.6933744221879815,x:1},
   {angle:0.6933744221879815,x:1.1},
   {angle:0.6933744221879815,x:1.2},
   {angle:0.6933744221879815,x:1.3},
   {angle:0.6933744221879815,x:1.4},
   {angle:0.6933744221879815,x:1.5}
]

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})`)

var x = d3.scaleLinear()
    .range([0, width])
    .domain([data[0].x , data[data.length - 1].x])

var y = d3.scaleLinear()
    .range([height, 0])
    .domain([-30, 120])

var xAxis = d3.axisBottom()
    .scale(x)
    .tickValues(x.ticks(8).concat(x.domain()[0]))
    .tickFormat(d => d +'s')
    .tickPadding(8)
    .tickSizeOuter(0)

var yAxis = d3.axisLeft()
    .scale(y)
    .ticks(8)
    .tickSizeOuter(4)
    .tickPadding(8);

var line = d3.line()
    .x(function (d) {
        return x(d.x);
    })
    .y(function (d) {
        return y(d.angle);
    })
    .curve(d3.curveCatmullRom);

svg.append('path')
    .attr('d', line(data))
    .attr('stroke', '#ff5722')
    .attr('stroke-width', '2')
    .attr('fill', 'none');

svg.append('g')
    .call(xAxis)
    .attr('transform', `translate(0, ${height})`)

svg.append('g')
    .call(yAxis)
    .selectAll(".tick")
    .append("line")
    .attr("x2", width)
    .style("stroke", "#eee")

.tick text{
    font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

tickSizeOuter不等于零，但是yAxis的第一个和最后一个刻度显示行

1 个答案: