Question

HTML：

<div id="line-graph"></div>

CSS：

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot {
  fill: lightblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.axis {
  fill: yellow;
  font-family: Times New Roman;
  font-size: 24px;
  font-color: red;
}

.axis line {
  stroke: gray;
}

.axis path{
  stroke: lime;
}

.axis text {
  fill: lightblue;
}

.grid line {
  stroke: lightgrey;
}

.grid path {
  stroke-width: 0;
}

JS：

'use strict';

const data = d3.range(40).map((i) => {
    if (i % 5) {
        return {
            x: (i / 39),
            y: ((Math.sin(i / 3) + 2) / 4)
        };
    }
    return null;
});

const margin = { 
    top: 40, 
    right: 40, 
    bottom: 40, 
    left: 40 
};
const width = (960 - margin.left - margin.right);
const height = (500 - margin.top - margin.bottom);

const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const line = d3.line()
    .defined(d => d)
    .x(d => x(d.x))
    .y(d => y(d.y));

const svg = d3.select('#line-graph')
    .append('svg:svg')
    .datum(data)
    .attr('width', (width + margin.left + margin.right))
    .attr('height', (height + margin.top + margin.bottom))
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// X-Axis line
svg.append('g') // g for group
    .attr('class', 'axis') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x));

// X-Axis gridlines
const customXAxis = d3.axisBottom(x)
    .ticks(9) // How many gridlines
    .tickSize(-height)
    .tickFormat('');

// Add X-Axis gridlines
svg.append('g') 
    .attr('class', 'grid') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(customXAxis);

// Y-Axis line
svg.append('g') // g for group
    .attr('class', 'axis') // CSS class
    .call(d3.axisLeft(y));

// Grapth line
svg.append('path')
    .attr('class', 'line') // CSS class
    .attr('d', line);

// Graph line dots
svg.selectAll('.dot')
    .data(data.filter(d => d))
    .enter().append('circle')
    .attr('class', 'dot') // CSS class
    .attr('cx', line.x())
    .attr('cy', line.y())
    .attr('r', 3.5);

目前：

想拥有：

如您所见，某些X和Y轴标签已消失，但线条长度仍然相同。 X轴上的最后一个网格线消失了。

我还想将X轴上的黄色区域向下延伸（使高度更高）和Y轴向左（使宽度更长），在油漆区写这个很痛苦，所以我跳过了这个。

Answer 1

所以我终于修好了。花了一些时间，看了一些奇怪的例子，但想出来了。我删除了底部的标签，但如果查看代码，则很容易调整。 https://jsfiddle.net/Lt83y1ph/

JS：

'use strict';

const data = d3.range(40).map((i) => {
    if (i % 5) {
        return {
            x: (i / 39),
            y: ((Math.sin(i / 3) + 2) / 4)
        };
    }
    return null;
});

const margin = { 
    top: 40, 
    right: 40, 
    bottom: 40, 
    left: 60 
};
const width = (960 - margin.left - margin.right);
const height = (500 - margin.top - margin.bottom);

const x = d3.scaleLinear().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const line = d3.line()
    .defined(d => d)
    .x(d => x(d.x))
    .y(d => y(d.y));

const svg = d3.select('#line-graph')
    .append('svg:svg')
    .datum(data)
    .attr('width', (width + margin.left + margin.right))
    .attr('height', (height + margin.top + margin.bottom))
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// X-Axis
const xAxis = d3.axisBottom(x)
    .ticks(9) // How many gridlines
    .tickSizeInner(-height) // Ticks in between the outer ticks
    .tickSizeOuter(0) // Ticks on both outer sides
    .tickFormat(''); // Removes tick labels
// Custom X-Axis function
function customXAxis(g) {
    g.call(xAxis);
}
// Add X-Axis
svg.append('g') 
    .attr('class', 'axis') // CSS class
    .attr('transform', 'translate(0,' + height + ')')
    .call(customXAxis);

// Y-Axis
const yAxis = d3.axisLeft(y)
    .ticks(9) // How many gridlines
    .tickSizeInner(10) // Ticks in between the outer ticks
    .tickSizeOuter(0) // Ticks on both outer sides
    .tickPadding(10); // Spacing between ticks and labels
// Custom Y-Axis function
function customYAxis(g) {
    g.call(yAxis);
    g.select('.domain').remove(); // Removes the initial axis line
    g.select('.tick:nth-of-type(1)').attr('display', 'none');
    g.select('.tick:nth-of-type(2)').attr('display', 'none');
    g.select('.tick:nth-last-of-type(1)').attr('display', 'none');
    g.select('.tick:nth-last-of-type(2)').attr('display', 'none');
}
// Add Y-Axis
svg.append('g') 
    .attr('class', 'axis') // CSS class
    .call(customYAxis);

// Grapth line
svg.append('path')
    .attr('class', 'line') // CSS class
    .attr('d', line);

// Graph line dots
svg.selectAll('.dot')
    .data(data.filter(d => d))
    .enter().append('circle')
    .attr('class', 'dot') // CSS class
    .attr('cx', line.x())
    .attr('cy', line.y())
    .attr('r', 3.5);

CSS：

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot {
  fill: lightblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.axis {
  fill: black;
  font-family: Times New Roman;
  font-size: 24px;
}

.axis line {
  stroke: lightgrey;
}

.axis text {
  fill: lightblue;
}

删除X轴和Y轴上的标签，并删除X轴上的最后一个网格线

1 个答案: