NVD3 javascript: thêm màu sắc vào các điểm trong ô phân tán

Question

Tôi đang cố gắng tạo một ô phân tán từ một số dữ liệu với các giá trị x, y và z.

Mã của tôi giống như ví dụ trên trang web NVD3, http://nvd3.org/ghpages/scatter.html, ngoại trừ tôi cũng tính giá trị z. Cho phép nói z = x + y. Thay vì thay đổi giá trị của bán kính, tôi muốn thiết lập màu bằng cách nội suy giữa hai màu.

Tất cả các điểm được hiển thị trên biểu đồ, nhưng tôi không thể tìm ra cách đặt màu cho từng điểm, chỉ cho chuỗi. Để đơn giản, đầu tiên tôi cố gắng thiết lập các điểm đến một màu tĩnh như thế này:

[{"key":"X Plus Y","values":[{"x":0,"y":0,"z":0,"color":"#ff0000"}, ...] 

nhưng điều này không làm việc, vì vậy tôi đoán tôi cần phải làm điều này trong javascript. Tôi đã xem xét trong scatterChart.js nhưng không thấy một cách dễ dàng. Nhưng tôi không phải là một chuyên gia javascript vì vậy tôi có thể dễ dàng bị mất một cái gì đó.

Bất kỳ lời khuyên nào về cách thực hiện việc này? Tôi có cần tìm hiểu cách tạo tệp mô hình mới không?

Tôi cũng muốn để hiển thị các giá trị z trong một mẹo công cụ, nhưng đó sẽ là bước 2.

Cảm ơn

Answer 1

tôi vừa chạy vào cùng một vấn đề và tìm thấy một workaround phù hợp sử dụng của tôi trường hợp - YMMV.

về cơ bản, sự hiểu biết của tôi (từ mã nguồn của NVD3) là bạn thực sự chỉ thiết lập màu cho chuỗi, chứ không phải cho từng điểm riêng lẻ, do đó tôi thêm mục color: '#rrggbb' vào đối tượng giá trị như bạn làm trong ví dụ của mình (chỉ vì tôi dễ dàng xây dựng cấu trúc dữ liệu như thế này), sau đó đặt giá trị màu của mỗi chuỗi từ này (tôi đang sử dụng underscore.js nhưng bạn có thể thực hiện điều này trong JavaScript thuần túy):

final_groups = _.map(groups, function(values, group_id) { 
    return { key: group_id, color: values[0].color, values: values }; 
}); 

Nếu bạn cần sử dụng màu liên tục thay vì đặt màu theo điểm hoặc sử dụng thang rời rạc, tôi đã sử dụng mbostock's advice from this answer để cho D3 tạo giá trị màu cho tôi:

function compute_color_on_linear_scale(data, value, colorProperty, colorRange) { 
    // get a list of all the groups (this works if the colorProperty, 
    // aka z in your case, is numeric, otherwise the sort function 
    // needs to be adjusted accordingly) 
    // In your case, you could just write item.z rather than item[colorProperty] 
    // if your function doesn't need to be generic, and in that case you can 
    // omit the colorProperty argument from the argument list altogether 
    categories = _.uniq(_.map(data, function(item) { 
     return item[colorProperty]; 
    }).sort(function(a,b){return a - b}), true); 

    // if no color range was provided, set a default one 
    if(typeof colorRange === 'undefined') { colorRange = ['red', 'green']; } 

    // this is mbostock's magic enchantment from his reply linked above 
    var color = d3.scale.ordinal() 
     .domain(categories) 
     .range(d3.range(categories.length).map(d3.scale.linear() 
     .domain([0, categories.length - 1]) 
     .range(colorRange) 
     .interpolate(d3.interpolateLab))); 

    return color(value); 
} 

Điều này cần thực hiện thủ thuật. Cảm giác cuối cùng của tôi là giấu huyền thoại vì điều đó sẽ không có ý nghĩa gì nhiều trong trường hợp này.

Để hiển thị giá trị z trong chú giải công cụ, bạn cần ghi đè hàm tooltipContent() mặc định của scatter(), ví dụ:

var chart = nv.models.scatterChart() 
    .showDistX(true) 
    .showDistY(true) 
    .tooltipContent(function(key, x, y, obj) { 
     return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
    }); 

Bạn có thể tùy chỉnh này càng nhiều càng cần thiết - nếu bạn chỉ cần thêm console.log(arguments); vào đầu của hàm, bạn có thể kiểm tra trong các công cụ nhà phát triển của trình duyệt của bạn chính xác mà dữ liệu có sẵn để bạn có thể sử dụng trong tooltips của bạn:

[...] 
.tooltipContent(function(key, x, y, obj) { 
    console.log(arguments); 
    return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
}); 

Answer 2

Để thêm thuộc tính màu cho bong bóng trong biểu đồ tán xạ, chúng tôi có thể thêm trình truy cập getColor như getSize trong nv.models.scatter.

, getSize  = function(d) { return d.size || 1} // accessor to get the point size 
, getColor  = function(d) { 
       var colors = ["red", "orange", "yellow", "green", "blue"]; 
       return colors[d.color] || 'red'} // accessor to get the point color 

Bạn có thể thêm màu sắc sử dụng "lấp đầy" thuộc tính nơi vòng tròn được sơn

//Info:May be on Mousehover?? 
points.enter().append('circle') 
    .attr('cx', function(d,i) { return x0(getX(d,i)) }) 
    .attr('cy', function(d,i) { return y0(getY(d,i)) }) 
    .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) }) 
    .attr('fill', function(d,i) { return getColor(d,i)});