d3轴标签在chrome和firefox中切断

 lydia芸小窝的天使 发布于 2023-01-10 08:54

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

//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);

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

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有