所以我在這里定義邊距： const svg1 = d3.select(graphElement1.current); const margin = {top: 0, right: 30, bottom: 10, left: 10}; const width = 650 - margin.left - margin.right; const height = 100 - margin.top - margin.bottom;在這里繪制圖表 const data = timeseries; const x = d3.scaleTime() .domain(d3.extent(data, function(d) { return new Date(d['date']+'2020'); })) .range([0, width]); const y = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return +d['totalconfirmed']; })]) .range([height, 0]); svg1.append('g') .attr('transform', 'translate(0,' + height + ')') .attr('class', 'axis') .call(d3.axisBottom(x));svg1.append('path') .datum(data) .attr('fill', 'none') .attr('stroke', '#ff073a99') .attr('stroke-width', 5) .attr('cursor', 'pointer') .attr('d', d3.line() .x(function(d) { return x(new Date(d['date']+'2020')); }) .y(function(d) { return y(d['totalconfirmed'])-5; }) .curve(d3.curveCardinal), ); svg1.selectAll('.dot') .data(data) .enter() .append('circle') .attr('fill', '#ff073a') .attr('stroke', '#ff073a') .attr('r', 3) .attr('cursor', 'pointer') .attr('cx', function(d) { return x(new Date(d['date']+'2020')); }) .attr('cy', function(d) { return y(d['totalconfirmed'])-5; }) .on('mouseover', (d, i) => { d3.select(d3.event.target).attr('r', '5'); setDatapoint(d); setIndex(i); }) .on('mouseout', (d) => { d3.select(d3.event.target).attr('r', '3'); });我已經(jīng)嘗試了很多 CSS 規(guī)則來允許 svg 尊重邊距定義，但我似乎無法使其工作。結(jié)果我也無法顯示 x 軸。這就是現(xiàn)在的樣子，右邊距有效，但是，
1 回答
楊__羊羊
TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊
解釋的：
這些邊距將用于插入我們的比例范圍。范圍的起點(diǎn)和終點(diǎn)向內(nèi)移動(dòng)相應(yīng)的邊距，而不是從 0 延伸到圖表的整個(gè)寬度和高度。
因此，對于x軸刻度，替換.range([0, width])為：
.range([margin.left,?width])
類似地，對于y軸，請嘗試以下范圍定義：
.range([height,?margin.top])
- 1 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消