Question

在下图中：

enter image description here

轴标签出现在y轴的顶部和x轴的最右侧。

如何修改标签的位置，使它们出现在轴位置的中心和刻度点后面（用蓝线标记）？：

enter image description here

和代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<style>

    body {
        font: 11px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
        stroke-width: 1.5px;
    }


    </style>
    <body style="overflow: hidden;">
    <div id="canvas"  style="overflow: hidden;"></div>

    <pre style="display:none" id="data">
        label,x,y,r
    l1,100,30,50
    l2,5,5,100
    l3,50,50,20

    </pre>

    <script type="text/javascript">

        $( document ).ready(function() {

            var margin = {top: 20, right: 20, bottom: 130, left: 140},
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;

            var xValue = function (d) {
                return d.x;
            }

            xScale = d3.scale.linear().range([0, width - margin.left - margin.right]) // value -> display
            xMap = function (d) {
                return xScale(xValue(d));
            }
            xAxis = d3.svg.axis().scale(xScale).orient("bottom");


            var yValue = function (d) {
                return d["y"];
            } // data -> value
            yScale = d3.scale.linear().range([height, 0]) // value -> display
            yMap = function (d) {
                return yScale(yValue(d));
            } // data -> display
            yAxis = d3.svg.axis().scale(yScale).orient("left");

            var rValue = function (d) {
                return d["r"];
            } // data -> value
            rMap = function (d) {
                return d["r"];
            } // data -> display

            // setup fill color
            var cValue = function (d) {
                        return d.Manufacturer;
                    },
                    color = d3.scale.category10();

            // add the graph canvas to the body of the webpage
            var svg = d3.select("body").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 + ")");

            // add the tooltip area to the webpage
            var tooltip = d3.select("body").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);

            /*   d3.csv("data.csv", function (error, data) {*/

            var data = d3.csv.parse( d3.select("pre#data").text() );

            data.forEach(function (d) {
                d.x = +d.x;
                d["y"] = +d["y"];
            });

            // don't want dots overlapping axis, so add in buffer to data domain
            xScale.domain([d3.min(data, xValue) - 1, d3.max(data, xValue) + 1]);
            yScale.domain([d3.min(data, yValue) - 1, d3.max(data, yValue) + 1]);

            // x-axis
            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("x", width)
                    .attr("y", -6)
                    .style("text-anchor", "end")
                    .text("x value");

            // y-axis
            svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("y value");

            // draw dots
            svg.selectAll(".dot")
                    .data(data)
                    .enter().append("circle")
                    .attr("stroke", "red")
                    .attr("stroke-width" , "2px")
                    .attr("r", rMap)
                    .attr("cx", xMap)
                    .attr("cy", yMap)
                    .style("fill", "none")
            // });




        });


    </script>
    </body>
    </html>

Answer 1

只需更改定位：

    // x-axis
    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("x", width / 2) //<- place at center of width**
            .attr("y", 30) //<- and below axis**
            .style("text-anchor", "end")
            .text("x value");

    // y-axis
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -30) //<- place behind axis**
            .attr("x", -height/2)  //<- place at center of height**
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("y value");

更新了fiddle。

修改D3轴标签的位置

1 个答案: