Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - D3.js:生成 X 轴会删除我的一些点的标签，生成 Y 轴会将它们全部删除

In lại Tác giả: Walker 123 更新时间：2023-11-28 18:59:31 26 4
mua khóa gpt4 Nike

编辑:在西里尔正确解决问题后，我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。

我几乎读完了 O'Reilly 书中关于 D3.js 的教程，并在倒数第二页上制作了散点图，但是当添加以下代码来生成我的 X 轴时，超过一半的标签消失了:

// Define X Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');
// Generate our axis
svg.append('g')
    .call(xAxis);

奇怪的是，在没有消失的标签中，留下的 3 个是我的数据集中最下面的 3 对([85,21]、[220,88]、[750,150]):

var myData = [
                [5, 20],
                ...,
                ...,
                [85, 21],
                [220, 88],
                [750,150]
            ];

这是正在发生的情况的图像，在顶部添加轴之前，每个点都有红色文本标签:

scatter plot

下面是生成散点图的其余代码，它几乎完全遵循书中解释的方法，我无法查明错误来自何处。

// =================
// = SCALED SCATTER GRAPH
// =================
var p = 30; // Padding
var w = 500 + p; // Width
var h = 500 + p; // Height

// SVG Canvas and point selector
var svg = d3.select('body')
    .append('svg')
    .attr('width',w)
    .attr('height',h);

// Scales take an input value from the input domain and return
// a scaled value that corresponds to the output range
// X Scale
var xScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){
        return d[0];
    })])
    .range([p, w - (p + p)]); // With padding. Doubled so labels aren't cut off
// Y Scale
var yScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){
        return d[1];
    })])
    .range([h - p, p]); // With padding

// Radial scale
var rScale = d3.scale.linear()
    .domain([0, d3.max(myData, function(d){ return d[1];})])
    .range([2,5]);

// Define X Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');
// Generate our axis
svg.append('g')
    .call(xAxis);

// Plot scaled points
svg.selectAll('circle')
    .data(myData)
    .đi vào()
    .append('circle')
    .attr('cx', function(d){
        return xScale(d[0]);
    })
    .attr('cy', function(d){
        return yScale(d[1]);
    })
    .attr('r', function(d){
        return rScale(d[1]);
    });

// Plot all labels
svg.selectAll('text')
    .data(myData)
    .đi vào()
    .append('text')
    .text(function(d){
        trả lại d;
    })
    .attr('x', function(d){
        return xScale(d[0]);
    })
    .attr('y', function(d){
        return yScale(d[1]);
    })
    .style('fill', 'red')
    .style('font-size',12);

js-fiddle:https://jsfiddle.net/z30cqeoo/

câu trả lời hay nhất

问题出在这里:

svg.selectAll('text')

x 轴和 y 轴使文本元素成为刻度，因此当轴存在时，上面的行将返回刻度数组，因此它解释了为什么添加轴时不显示.

所以正确的方法是这样做:

svg.selectAll('.text') //I am selecting those elements with class name text

svg.selectAll('.text')
    .data(myData)
    .đi vào()
    .append('text')
    .text(function(d){
        console.log(d)
        trả lại d;
    })
    .attr('x', function(d){
        return xScale(d[0]);
    })
    .attr('y', function(d){
        return yScale(d[1]);
    })
    .attr('class',"text") //adding the class
    .style('fill', 'red')
    .style('font-size',12);

完整工作代码đây .

关于javascript - D3.js:生成 X 轴会删除我的一些点的标签，生成 Y 轴会将它们全部删除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32885096/

26 4 0
Đề xuất bài viết: ios - iPhone 和 iPod 在开发方面有什么区别？
Đề xuất bài viết: javascript - Ionic 检测 "back"以实现更好的 native 页面转换
Đề xuất bài viết: javascript - 显示提醒消息以分享您的位置谷歌地图
Đề xuất bài viết: javascript - 使用 jQuery 和单击功能检测 HTML 文本区域的更改
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress