Question

我正在尝试使用自定义标签更新我的轴，因为我希望我的用户能够使用不同的数据集。我加载的当前标签名称数组中有17个元素。

加载页面时，图表只显示11个元素，如下所示：http://servers.binf.ku.dk/hemaexplorerbeta/

如何更新xScale以便能够同时处理所有元素？

以下是我的比例代码：

    var xScale = d3.scale.linear()
        .domain([-25, genWidth])
        .range([0, width-margin.right]);

我的更新功能：

    function updateAxisX(arr) {

        var formatAxis = function(d) {
           return arr[d % arr.length];      
        }

        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(formatAxis);


        SVG.select(".x.axis")
            .call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
    }

我还有一个缩放功能，您也可以在其中拖动图形。正如我所提到的，X轴总共有17个元素，尽管在我的图表中它们一遍又一遍地重复。有什么办法可以阻止缩放让用户将图形拖出“最大”框架吗？换句话说，我希望能够只在图表上放大时才能拖动，直到你到达图表的“边缘”而不再有。

这是缩放功能的代码：

    var zoom = d3.behavior.zoom()
        .x(xScale)
        .y(yScale)
        .scaleExtent([1, 10])
        .on("zoom", zoomTargets);

    function zoomTargets() {
        SVG.select(".x.axis").call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .attr("transform", function(d) {
                return "rotate(-65)" 
                });
        SVG.select(".y.axis").call(yAxis);
        SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
    }

另外不要介意巨大的红色圆圈，它们只是随机制作用于测试的东西。我还应该提一下，当我完成所有工作时，我的图表应该是一个散点图。

一个简短的问题。因为我没有使用数字，而是我插入字符串的自定义标签。如何相应地将我的圆圈插入x轴上的每个点？

非常感谢您的帮助！

如何更新我的比例以考虑我的轴

0 个答案: