在javascript计算-D3图表中使用%代替px

Use % instead of px in javascript calculations -D3 charts

本文关键字：代替 px javascript 计算 -D3      更新时间：2023-09-26

我试图使这个脚本响应，需要它使用%而不是像素，但它似乎爆炸。当我使用%时，是否缺少某种语法?它需要逃脱吗?

目前设置为960，但我希望它是100%。我试图突破相关代码，但没有发现脚本中有"px"设置的任何内容。

var margin = { top: 50, right: 0, bottom: 100, left: 30 },
width = 960 - margin.left - margin.right,
height = 430 - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = gridSize*2,
buckets = 9
 var svg = d3.select("#chart").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 + ")");

您需要将单位包含为字符串:

.attr("width", width + margin.left + margin.right + "%")

默认使用的单位是像素(px)。因此，如果您想要像素以外的任何单位，您必须将其作为字符串包含。

您需要使用以下

d3.select("#chart").append("svg").attr("width", ''+width + margin.left + margin.right+'%')

或者

.css("width", width + margin.left + margin.right + "%")

如果width属性被单独附加，则意味着外部样式="标签

其他也一样

相关文章：