gpt4 book ai didi

svg - d3 轴标签在 chrome 和 firefox 中被切断

转载 作者:行者123 更新时间:2023-12-04 13:45:57 25 4
gpt4 key购买 nike

我在 d3 中创建了一个散点图。问题是 y 轴标签没有出现在 Firefox 和 chrome 中(在 IE 中工作正常)。我试过做一些事情,比如使 svg 宽度为 100%,但由于某种原因,标签总是被切断。

<div id="TimeSeriesChartDiv" style="display: inline; float: right; width: 650px;
height: 415px">
</div>

//Width and height
var w = 600;
var h = 300;
var padding = 30;
var margin = { top: 20, right: 20, bottom: 30, left: 20 };
var df = d3.time.format("%b-%y");


//Create scale functions
var xScale = d3.time.scale()
.domain([d3.min(dataset, function (d) { return d[0]; }), d3.max(dataset, function (d) { return d[0]; })])
.range([padding, w - padding * 2])
.nice(5);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) { return d[1]; })])
.range([h - padding, padding]);
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.tickFormat(df);

//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);

//Create SVG element
var svg = d3.select("#TimeSeriesChartDiv")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom);

//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(20," + (h - padding) + ")")
.call(xAxis);

//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + 50 + ",0)")
.call(yAxis);

svg.append("text")
.attr("class", "axislabel")
.attr("text-anchor", "end")
.attr("x", w / 2)
.attr("y", h + 8)
.text("Date");

svg.append("text")//-->>this is the text that gets cut off
.attr("class", "axislabel")
.attr("text-anchor", "end")
.attr("x", -100)
.attr("y", -15)
//.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text(unit);

任何想法将不胜感激。谢谢

最佳答案

您对文本使用负坐标,这意味着它们被绘制在 SVG 之外。看来IE9 doesn't seem to clip thing to the SVG area ,其他浏览器可以。最好的解决方案是为图形添加足够的填充,以便您的文本可以在 SVG 内绘制。禁用剪辑 does not seem to be supported in all browsers .

关于svg - d3 轴标签在 chrome 和 firefox 中被切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24146929/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com