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

android — D3JS - thay đổi màu sắc khi làm mới bằng setinterval (còn gọi là rách rưới)

In lại Tác giả: Walker 123 Thời gian cập nhật: 28-11-2023 00:56:10 26 4
mua khóa gpt4 Nike

Hy vọng ai đó có thể giúp đỡ ở đây.

Tôi có một số biểu đồ sử dụng setinterval để làm mới trong 500 mili giây. Khi làm mới, nó sẽ tải dữ liệu từ tệp JSON được tạo bởi tập lệnh Python. Tôi muốn có thể RAG (đỏ, hổ phách, xanh lục) dữ liệu trong biểu đồ dựa trên các giá trị này.

Ví dụ: Nếu số nhỏ hơn 10 thì tô màu xanh lá cây. Nếu từ 10 đến 20 thì màu hổ phách, trên 20 thì màu đỏ.

Tôi sẽ lấy biểu đồ đạn của Mike làm ví dụ:https://bl.ocks.org/mbostock/4061961

Trong CSS của tôi, tôi đã thêm các màu - s0 và s1 có trong ví dụ của anh ấy:

.bullet .measure.s0 { điền: lightsteelblue }
.bullet .measure.s1 { điền: thép xanh }
.bullet .measure.s2 { điền: rgb(242, 242, 242 }
.bullet .measure.s3 { điền: #DF4A5E }
.bullet .measure.s4 { điền: rgb(242, 242, 242 }
.bullet .measure.s5 { điền: #FBAB4A }
.bullet .measure.s6 { điền: rgb(242, 242, 242 }
.bullet .measure.s7 { điền: #24C678 }

Sau đó, trong Bullet.js tôi có thể gọi một hàm dựa trên giá trị dữ liệu, hàm này sẽ chọn lớp CSS chính xác (dòng 5-13 ở đây):

            var số đo = g.selectAll("orth.measure")
                .data(đo);

            Measure.enter().append("orth")
                .attr("class", hàm (d, i) {
                    nếu (d > 20) {
                        return "số đo s" + (i + 2);
                    } khác nếu (d > 10) {
                        return “số đo s” + (i + 4);
                    } khác {
                        return “số đo s” + (i + 6);
                    }
                })
                .attr("chiều rộng", w0)
                .attr("chiều cao", chiều cao / 2)
                .attr("x", đảo ngược ? x0 : 0)
                .attr("y", chiều cao / 4)
                .transition()
                .duration(thời lượng)
                .attr("chiều rộng", w1)
                .attr("x", đảo ngược ? x1 : 0);

            thước đo.transition()
                .duration(thời lượng)
                .attr("chiều rộng", w1)
                .attr("chiều cao", chiều cao / 2)
                .attr("x", đảo ngược ? x1 : 0)
                .attr("y", chiều cao / 4);

Điều này hoạt động rất tốt, khi tôi làm mới trang, màu sắc sẽ thay đổi chính xác dựa trên giá trị trong JSON, nhưng với lần làm mới theo khoảng thời gian của tôi, nó không cập nhật.

Làm mới của tôi là như sau:

setInterval(hàm () {
    cập nhậtData();
}, 500);

hàm cập nhậtData() {
  d3.json("mailboxes.json", hàm (lỗi, dữ liệu) {
    d3.select("cơ thể")
      .selectAll("svg")
      .select('g')
      .data(dữ liệu)
      .call(chart.duration(500));
   });
};

Điều này làm mới dữ liệu nhưng rõ ràng là không vẽ lại hình chữ nhật.

Tôi đã thử thêm bộ chọn vào thước đo rồi thay đổi lớp nhưng không được. (Tôi cũng đã thử SelectAll("svg") rồi chọn('orth.measure') và bất kỳ sự kết hợp nào tôi có thể nghĩ ra.

hàm cập nhậtData() {
  d3.json("mailboxes.json", hàm (lỗi, dữ liệu) {
    d3.select("cơ thể")
      .selectAll("svg")
      .select('g')
      .data(dữ liệu)
      .call(chart.duration(500));

    d3.select("cơ thể")
      .selectAll("orth.measure")
      .data(dữ liệu)
      .attr("class", hàm (d, i) {
        nếu (d > 20) {
          return "số đo s" + (i + 2);
        } khác nếu (d > 10) {
          return “số đo s” + (i + 4);
        } khác {
          return “số đo s” + (i + 6);
        }
  });
};

Dưới đây là ví dụ về trang được tải khi giá trị của JSON hỗ trợ dưới 10, do đó có màu xanh lục. Giá trị đã tăng lên trên 10 và bây giờ sẽ có màu hổ phách.

Dấu đầu dòng màu xanh trước khi làm mới trang

Khi tôi làm mới trang, nó hoạt động như mong đợi

Dấu đầu dòng màu hổ phách sau khi làm mới trang

Tôi có thể chỉ cần chức năng vẽ lại khi làm mới như bên dưới nhưng tôi đã thử một vài thứ và không có gì hiệu quả

vẽ lại()

vẽ lại hàm(
  biện pháp.blah
)

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

Bạn phải thay đổi vị trí của lớp cập nhật.

hiện hữu chuyển đổi() được thực hiện trước đó, nếu không chuỗi lớp sẽ được nội suy và một màu đen thẳng

        Measure.enter().append("orth")
            .attr("chiều rộng", w0)
            .attr("chiều cao", chiều cao / 2)
            .attr("x", đảo ngược ? x0 : 0)
            .attr("y", chiều cao / 4)
            .transition()
            .duration(thời lượng)
            .attr("chiều rộng", w1)
            .attr("x", đảo ngược ? x1 : 0);

        đo lường
            .attr("class", hàm (d, i) {
                if (d > 20) { return "độ đo s" + (i + 2 }
                if (d > 10) { return "độ đo s" + (i + 4 }
                return “số đo s” + (i + 6);
            })
            .transition()
            .duration(thời lượng)
            .attr("chiều rộng", w1)
            .attr("chiều cao", chiều cao / 2)
            .attr("x", đảo ngược ? x1 : 0)
            .attr("y", chiều cao / 4);

Về javascript - D3JS - thay đổi màu khi làm mới bằng setinterval (còn gọi là ragging), chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/52925911/

26 4 0
Đề xuất bài viết: Thanh trượt JavaScript không hoạt động bình thường
Đề xuất bài viết: CSS - Nút menu cố định hiển thị khi cuộn
Đề xuất bài viết: html - Tùy chỉnh CSS
  • Nhắm mục tiêu không hoạt động như mong đợi trong truy vấn phương tiện
    •
    Đề xuất bài viết: Khởi động mùa xuân không tải hình ảnh từ đường dẫn src/main/resource tới jsp
    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