Javascript 在d3js中创建图例样式的轴/比例

解决方案：

我花了一点时间研究这个问题，并提出了一个体面的解决方案。Lars是对的，d3.js并没有真正考虑到我想要的东西，但经过一点分层，它就成功了。基本上，我创建了一个只包含轴的新SVG，将其覆盖在实际图形上，并将两个缩放比例绑定在一起。代码如下：

var x = d3.scale.linear()
    .nice()
    .domain([-1, 1])
    .range([0, w]);

var xScale = d3.scale.linear()
    .nice()
    .domain([0, 1])
    .range([0, 230]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(3)
    .tickSize(7);

var y = d3.scale.linear()
    .nice()
    .domain([1, -1])
    .range([h, 0]);
/* Control panning and zooming */
var zoom = function() {
    if( d3.event ) {
        zm.scale(d3.event.scale).translate(d3.event.translate);
        za.scale(d3.event.scale);   // don't translate so the axis is fixed
    }

            /* Do other zoom/pan related translations for chart */

    // Update x-axis on pan and zoom
    vis2.select(".xaxis")
        .transition()
        .ease("sin-in-out")
        .call(xAxis);

    vis.selectAll("line.link")
        .attr("x1", function(d) { return x(parseFloat(d.source.x)); })
        .attr("y1", function(d) { return y(parseFloat(d.source.y)); })
        .attr("x2", function(d) { return x(parseFloat(d.target.x)); })
        .attr("y2", function(d) { return y(parseFloat(d.target.y)); });
};

var zm = d3.behavior.zoom().x(x).y(y).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);
var za = d3.behavior.zoom().x(xScale).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);

    force = d3.layout.force()
        .gravity(0)
        .charge(-5)
        .alpha(-20)
        .size([w, h]);

    nodes = force.nodes();
    links = force.links();

    vis = d3.select(CHART).append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .call(zm);

    vis.append("rect")
       .attr("class", "overlay")
       .attr("width", "100%")
       .attr("height", "100%");

    vis2 = vis.append("svg:svg")
        .attr("width", 300)
        .attr("height", 30)
        .call(za);

    vis2.append("svg:g")
        .attr("class", "xaxis")
        .attr("transform", "translate(20,10)")
        .call(xAxis);

    vis2.append("rect")
       .attr("class", "overlay")
       .attr("width", "100%")
       .attr("height", "100%");

    force.on("tick", zoom);

结果（当然还有一些附加的CSS）如下所示，当用户放大和缩小时，比例会自动调整：

原始问题：

我在D3js中有一个图表，它沿X轴显示一个比例，并在放大和缩小时适当更新。但是，我不想让图表的整个底部都是一个比例尺，而是想将比例尺显示为一个图例，比如地图上的距离比例尺（例如）。这可能吗

相关代码片段：

var x = d3.scale.linear()
            .nice()
            .domain([-1, 1])
            .range([0, w]);

var xAxis = d3.svg.axis()
              .scale(x);

var zoom = function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return "translate(" + x(parseFloat(d.x)) + "," + y(parseFloat(d.y)) + ")";
        });

    // Update x-axis on pan and zoom
    vis.select(".xaxis")
        .transition()
        .ease("sin-in-out")
        .call(xAxis);
};

---

图像的链接是403。我将其更新为一个新链接，应该可以正常工作。D3提供的axis组件无法实现这一点，但您当然可以自由滚动自己的链接。