d3.nest() chuyển đổi khóa và giá trị thành tên và trẻ em

Question

Tôi đang làm việc để tạo Sơ đồ trang web từ tệp csv. Dữ liệu trong tệp csv là phân cấp, do đó tôi đã sử dụng d3.nest(). Tuy nhiên, kết quả là JSON ở dạng {key: "Hoa Kỳ", các giá trị: [...]} Sơ đồ trang có thể thu phóng ví dụ: (http://mbostock.github.io/d3/talk/20111018/treemap.html) yêu cầu phân cấp là {name: "Hoa Kỳ", trẻ em: [ ...]}. Tôi đã thử thay thế tên và trẻ em thành khóa và giá trị trong ví dụ, nhưng nó không hoạt động. Nếu có ai đó đã xem xét sử dụng khóa và giá trị trên treemap có thể thu phóng, vui lòng trợ giúp. Tôi mới đến D3 và tôi không biết liệu d.children có nghĩa là cấu trúc hoặc giá trị từ dữ liệu.

Đây là mã để chuyển đổi các lục địa, khu vực và quốc gia trên thế giới từ CSV sang phân cấp bằng cách sử dụng d3.

$ d3.csv("../Data/WorldPopulation.csv", function (pop) { var treeData= { "key": "World", "values": d3.nest() .key(function (d) { return d.Major_Region; }) .key(function (d) { return d.Region; }) .key(function (d) { return d.Country; }) .entries(pop) };

Một vài dòng đầu tiên của kết quả là:

`[{"key":"AFRICA","values":[{"key":"Eastern Africa","values" 
[{"key":"Burundi","values":[.........` 

tôi không thể sử dụng các biểu đồ dạng cây Zoomable vì nó đòi hỏi tên và trẻ em nhãn trong json chứ không phải là quan trọng và giá trị.

Answer 1

Cách tốt nhất để chuyển đổi tổ thành sơ đồ trang web là chỉ định chức năng truy cập trẻ em với Treemap.children().

Trong ví dụ về sơ đồ trang web có thể thu phóng, nó không chỉ yêu cầu "con" mà còn "tên" và "kích thước". Bạn có thể thực hiện:

1) thay đổi chức năng truy cập của các thuộc tính đó để tiếp tục sử dụng "khóa" và "giá trị".

Hãy thay đổi source code.

1,1) dòng 79 & 86:

.style("fill", function(d) { return color(d.parent.name); }); 

.text(function(d) { return d.name; }) 

Thay thế ".name" với ".YOUR_NAME_KEY "(tức là" .key")

.style("fill", function(d) { return color(d.parent.YOUR_NAME_KEY); }); 

.text(function(d) { return d.YOUR_NAME_KEY; }) 

1,2) dòng 47:

var treemap = d3.layout.treemap() 
.round(false) 
.size([w, h]) 
.sticky(true) 
.value(function(d) { return d.size; }); 

Nối một dòng để chỉ định chức năng truy cập trẻ em. (Ví dụ: ".values")

var treemap = d3.layout.treemap() 
.round(false) 
.size([w, h]) 
.sticky(true) 
.value(function(d) { return d.YOUR_SIZE_KEY; }) 
.children(function(d){return d.YOUR_CHILDREN_KEY}); 

1,3) dòng 97 & 51:

function size(d) { 
    return d.size; 
} 

Thay thế ".size" với ".YOUR_SIZE_KEY" (Bạn đã không đề cập trong kết quả JSON của bạn)

function size(d) { 
    return d.YOUR_SIZE_KEY; 
} 

T.B. Có thể một cái gì đó bị bỏ qua, bạn cần xác minh nó cho mình.

2) chuyển đổi cấu trúc JSON của bạn để phù hợp với ví dụ với Array.map().

Answer 2

Tôi hoàn toàn đồng ý với @Anderson rằng cách tiếp cận dễ nhất cho vấn đề này là sử dụng phương thức treemap children(function) và .value(function) để chỉ định tên của thuộc tính trong tập dữ liệu lồng nhau.

Tuy nhiên, một số duplicate question has recently been posted trong đó người hỏi cụ thể yêu cầu trợ giúp bằng cách sử dụng phương pháp Array.map. Vì vậy, đây là:

array map(function) method tạo mảng mới trong đó mỗi phần tử trong mảng là kết quả của việc chạy hàm được chỉ định trên mỗi phần tử của mảng ban đầu. Cụ thể, hàm được chạy với tối đa ba đối số: phần tử từ mảng ban đầu, chỉ mục của phần tử đó và toàn bộ mảng ban đầu. Với mục đích thao túng tên thuộc tính, chúng ta chỉ cần đối số đầu tiên.

Dữ liệu lồng nhau trong bài đăng gốc có ba cấp độ, tương đương với ba hàm chính. Do đó, chúng ta sẽ cần một chức năng lập bản đồ ba cấp:

var treeData= { "key": "World", "values": 
     d3.nest() 
     .key(function (d) { return d.Major_Region; }) 
     .key(function (d) { return d.Region; }) 
     .key(function (d) { return d.Country; }) 
     .entries(pop) 
     }; 

var treeData2 = { "name": "World", "children": 
     treeData.values.map(function(major){ 

      return { "name": major.key, "children": 
       major.values.map(function(region){ 

       return { "name": region.key, "children": 
        region.values.map(function(country){ 

         return { "name": country.key, "children": country.values }; 

        }) //end of map(function(country){ 
       }; 

       }) //end of map(function(region){ 
      }; 

     }) //end of map(function(major){ 
     }; //end of var declaration 

Bạn cũng có thể có thể thực hiện điều này với một hàm đệ quy, đó sẽ là đặc biệt hữu ích nếu bạn có nhiều cấp độ hơn về làm tổ.

Answer 3

Xin chào các bạn, tôi nghĩ rằng tôi đã tìm thấy một giải pháp khá đơn giản. Tôi đã hoàn thành một tổ hợp rất đẹp của một tập dữ liệu lớn (400.000 hàng) cho một biểu đồ thanh phân cấp theo cách rất hợp lý. Nó sử dụng thư viện Underscore và một hàm bổ sung _.nest. Đơn giản chỉ cần tải về và bao gồm hai thư viện cần thiết

"nhấn-min.js" "underscore.nest.js"

Sau đó sử dụng chức năng _.nest để tạo ra cấu trúc của bạn. Đây là dòng của tôi:

var newdata = _.nest(data, ["Material", "StudyName"]); 

"Material" và "StudyName" là các cột tôi muốn nhóm cấu trúc của mình.

Có các tùy chọn khác để sử dụng chức năng này nếu bạn cần thực hiện nhiều việc hơn nhưng tôi sẽ để nó như thế này