Question

我正在使用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)`);
}

在桌面屏幕尺寸上还可以，但由于矩形的尺寸固定，因此在移动设备上看起来很糟糕。

需要帮助以使我的华夫饼图响应

0 个答案: