Question

XAxis标签与xAxis标题重叠。看Bargraph1

试图引入padding{bottom:50}，但随后隐藏了xAxis标题。看Barchart2

g.append("text")
            .attr("transform",
                "translate(" + (margin.left + ((width - margin.right - margin.left) / 2.0)) + "," + ((height-margin.bottom + parseInt(titleFontSize) + 40 + axisXMargin)) + ")")
            .style("text-anchor", "middle")
            .style("font-size", titleFontSize + "px")
            .style("font-family", titleFontName)
            .style("font-weight", function(d) {
                    if (titleFontStyle == "bold") {
                        return "bold";
                    } else {
                        return "normal";
                    }
            })
            .style("font-style", function(d) {
                    if (titleFontStyle == "italic") {
                        return "italic";
                    } else {
                        return "normal";
                    }
            })
            .text(xAxisName);

Answer 1

也许设置宽度，高度和边距会有所帮助。像这样

const svg = d3.select('.canvas')
    .append('svg')
    .attr('width', 600)
    .attr('height', 600);

// create margins and dimensions
const margin = { top: 20, right: 20, bottom: 100, left: 100 };
const graphWidth = 600 - margin.left - margin.right;
const graphHeight = 600 - margin.top - margin.bottom;

const graph = svg.append('g')
    .attr('width', graphWidth)
    .attr('height', graphHeight)
    .attr('transform', `translate(${margin.left}, ${margin.top})`)

XAxis标签与XAxis标题重叠

1 个答案: