1

我正在用 d3.js 创建一个华夫饼图，我想让它响应屏幕尺寸。我正在做的方式是每个矩形都有一个固定大小，我不知道如何更改大小以响应屏幕大小。

我已经用两个js文件试过了。一种用于桌面屏幕尺寸，另一种用于移动设备。但是，它不起作用，因为即使它们属于不同的文件，也检测到它们使用相同的变量。另一个问题是，如果我在第一个文件中选择 g 和/或 selectall .rect，机器会识别出我选择了 DOM 上的所有 g 和 .rect。

const width = 900;
const height = 500;
const numRows = 6;

let svg = d3.select('#waffle')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g');

// A failed attempt to make the chart responsive
let aspect = width / height,
chart = d3.select('#waffle');

d3.select(window)
.on("resize", function () {
    var targetWidth = chart.node().getBoundingClientRect().width;
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
});

// load data
d3.csv('data/tracker.csv')
.then(data => {
    drawWaffle(data);
})

// render the chart
function drawWaffle(data) {

plots = svg.selectAll('.rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', 20)
    .attr('height', 20)
    .attr('x', (d, i) => {
        let rowIndex = Math.floor(i / numRows)
            return (rowIndex * 22)
    })
    .attr('y', (d, i) => {
        let colIndex = i % numRows
            return (colIndex * 22)
    })
    .attr('rx', (d, i) => {
        return "10px"
    })
    .style('fill', camp_color)
    .style('stroke', 'none')
    .attr('transform', `translate(55, 21)`);
}

在桌面屏幕尺寸上没问题，但在移动设备上看起来很糟糕，因为矩形的尺寸是固定的。

4

0 回答 0