Làm thế nào để vô hiệu hóa một số dòng theo mặc định trong một biểu đồ dòng đơn giản nvd3?

Question

Tôi có một vài dòng và tôi biết rằng việc nhấp vào "dấu chấm" trong chú giải sẽ ẩn/hiện nó.

Tuy nhiên, tôi cần bắt đầu bằng một số dòng bị tắt và không được hiển thị và người dùng sẽ phải nhấp vào dấu chấm trong chú giải để hiển thị nó trên biểu đồ.

(ví dụ: tôi vẽ đồ thị số lượng câu hỏi trên stackoverflow cho mỗi ngôn ngữ, nhưng với C, PHP và javascript bị tắt theo mặc định). biểu đồ chỉ hiển thị python, ruby ​​... nhưng trên truyền thuyết, bạn có tất cả các ngôn ngữ, bao gồm C, PHP và js với 3 ngôn ngữ này bị vô hiệu hóa.

Tôi chưa tìm thấy phương thức/thuộc tính cho từng serie dữ liệu để đặt trạng thái hiển thị/ẩn mặc định. Tui bỏ lỡ điều gì vậy?

Answer 1

Đối với mỗi loạt dữ liệu mà bạn muốn tàn tật, chỉ cần làm:

series.disabled=true 

nvd3 không làm tất cả mọi thứ, nhưng nếu bạn sẵn sàng để kiểm tra nội dung mã nó thực sự là khá linh hoạt. Tôi phát hiện ra điều này bằng cách tìm kiếm dòng này trong nguồn của một số các mô hình biểu đồ:

state.disabled = data.map(function(d) { return !!d.disabled }); 

Answer 2

NVD3 không thực sự đủ linh hoạt cho điều đó - bạn không bỏ sót bất cứ điều gì, bạn không thể làm điều đó (ít nhất là không ra khỏi hộp). Bạn sẽ cần phải thực hiện chức năng này cho mình, hoặc sử dụng đồng bằng cũ D3.

Answer 3

Bạn có thể bắt đầu với một biểu đồ ẩn và thử một cái gì đó như thế này:

// Array of series you want to hide 
var hidden = [0, 2]; 

// Dispatch click event to each element 
var e = document.createEvent('UIEvents'); 
e.initUIEvent('click', true, true); 
d3.select('.nv-legend') 
    .selectAll('.nv-series') 
    .filter(function(d, i){return hidden.indexOf(i) !== -1;}) 
    .node() 
    .dispatchEvent(e); 

Một khi điều này kết thúc, thôi ẩn biểu đồ của bạn và bộ phim sẽ bị vô hiệu.

Answer 4

Bạn có thể thay đổi mà con suối được bật/tắt bằng cách sử dụng các đối tượng chart.state(). Ví dụ:

// Assuming your chart is called 'chart' 
var state = chart.state(); 

for(var i=0; i < state.disabled.length; i++) { 
    state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...; 
} 

chart.dispatch.changeState(state); 
chart.update(); 

Answer 5

Sau khi đọc câu trả lời này, tôi phải đọc thêm để hiểu cách đặt luồng bị vô hiệu hóa từ luồng dữ liệu JSON của tôi cho biểu đồ.

Ví dụ dưới đây là những gì giải quyết nó cho tôi khuyết tật: true

{ 
    key: "something", 
    disabled: true, 
    values: [...] 
    }