Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] 展開されているサブカテゴリノード数の制限 #4

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[WIP] 展開されているサブカテゴリノード数の制限 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
137282f
論理削除のデモ
daiiz Jan 3, 2016
dfe7c46
データを物理削除するデモに挑戦
daiiz Jan 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions layout.force.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,23 @@ var LayoutForce = (function () {
var svg = d3.select('#' + this.stageId);

// Linksを反映
var edge = svg.selectAll('.link').data(this.links).enter().append('line').attr('class', 'link').style('stroke', function (d) {
var e = svg.selectAll('.link').data(this.links);
var edge = e.enter().append('line').attr('class', 'link').attr('id', function (d) {
return 'link-to-' + d.target.id;
}).style('stroke', function (d) {
return _this.getEdgeColorByTargetNodeType(d.target.type);
}).style('stroke-width', function (d) {
if (d.value !== undefined) return d.value;
return 1;
});
svg.selectAll('link').data(this.links).exit().remove();
e.exit().remove();

// Nodesを反映
var node = svg.selectAll('.node').data(this.nodes).enter().append('g').attr('class', 'node').call(this.force.drag);
svg.selectAll('.node').data(this.nodes).exit().remove();
var n = svg.selectAll('.node').data(this.nodes);
var node = n.enter().append('g').attr('id', function (d) {
return 'node-' + d.id;
}).attr('class', 'node').call(this.force.drag);
n.exit().remove();

// Node.Circlesを反映
var circle = node.append('circle').attr('r', function (d) {
Expand Down Expand Up @@ -163,6 +169,19 @@ var LayoutForce = (function () {
key: 'removeLinkById',
value: function removeLinkById(id, redraw) {}

// ノードとリンクのペアを削除する
}, {
key: 'removeNode',
value: function removeNode(nodeId, redraw) {
this.nodes = this.nodes.filter(function (node) {
return node.id == nodeId ? null : node;
});
this.links = this.links.filter(function (link) {
return link.target.id == nodeId ? null : link;
});
this.drawGraph();
}

// canvasサイズを設定する
}, {
key: 'setGraphSize',
Expand Down
28 changes: 25 additions & 3 deletions layout.force.miil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,14 @@ var MiilGraph = (function (_LayoutForce) {
photos.forEach(function (photo_json) {
var parentNodeId = photo_json[pid];
var me = {
pid: parentNodeId,
id: photo_json.id,
title: photo_json.title,
type: 'photo',
photo_url: photo_json.url,
page_url: photo_json.page_url,
group: parentNodeId
group: parentNodeId,
visible: true
};
self.addNode(me);
var parent = self.getNodeById(parentNodeId);
Expand All @@ -131,6 +133,23 @@ var MiilGraph = (function (_LayoutForce) {
// TODO: `m`を使わない場合どうすれば良いのかわからない
m.parseMiilPhotos(callback_res, 'subcategory', m);
}
}, {
key: 'closeNodeExceptNodeId',
value: function closeNodeExceptNodeId(id) {
var _this3 = this;

var nodes = this.getNodesAll();
var del_nodeIds = [];
nodes.forEach(function (node) {
if (node.type === 'photo' && node.pid != id) {
del_nodeIds.push(node.id);
}
});

del_nodeIds.forEach(function (nid) {
_this3.removeNode(nid, true);
});
}

// @Override
}, {
Expand All @@ -145,11 +164,11 @@ var MiilGraph = (function (_LayoutForce) {
}, {
key: 'appLoad',
value: function appLoad() {
var _this3 = this;
var _this4 = this;

miil_categories.forEach(function (cate) {
if (cate.category_id !== 588 && cate.category_id !== 589) {
_this3.parseMiilCategories(cate, [_this3.getNodeIdxById('miilroot')]);
_this4.parseMiilCategories(cate, [_this4.getNodeIdxById('miilroot')]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

forEachでは、thisObjectを二番目の引数で指定することができます。
thisの参照を増やさないで、この機能は積極的に使っていきましょう

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど，ありがとうございます。

この部分は，下のコードをbabelで変換したら出てきたのもので，アロー関数を使えば上手くthisを補足してくれるものと思っていたのですが，

appLoad () {
    miil_categories.forEach(cate => {
        if (cate.category_id !== 588 && cate.category_id !== 589) {
            this.parseMiilCategories(cate, [this.getNodeIdxById('miilroot')]);
        }
    });
    this.drawGraph();
}

やはり，

arr.forEach(elem, self => { });

という2引数で書いた方が良いということですね。

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど、babelで変換したのですね。

通常は、そういう場合for of構文を使います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

[1, 2, 3].forEach(elem => console.log(this.a));

は、

for (let elem of [1,2,3]) {
  console.log(this.a);
}

と同値です。インデックスをとらないようなforEachをbabelで使うときは、for ofを使っていきましょう。

ついでに、forEachよりJSではインデックスアクセスの方がArrayオブジェクトにとっては効果的（まず、関数オブジェクトがforEachは必ず作成されますし、関数呼び出しのオーバーヘッドもかかるので）なため、for ofの場合、for(var i = 0; ...) { ... }といった感じで変換されます。

https://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&code=function%20A%28%29%20{%0A%0Afor%20%28let%20i%20of%20[1%2C2%2C3]%29%20{%0A%20%20console.log%28this.a%29%3B%0A}%0A%0A}

}
});
this.drawGraph();
Expand All @@ -169,11 +188,14 @@ var MiilGraph = (function (_LayoutForce) {
this.parseMiilSubCategories(id);
console.info(node);
} else if (type === 'subcategory') {
// 自身以外のサブカテゴリに属するコンテンツを非表示にする
this.closeNodeExceptNodeId(id);
// サブカテゴリに属するコンテンツを展開する
var baseApi = 'https://api.miil.me/api/photos/recent/categories/' + node.id;
var api = this.getMiilApiUrl(baseApi, node.nextUrl, 'callback=ps');
d3.jsonp(api, null);
} else if (type === 'user') {
this.closeNodeExceptNodeId(id);
var userName = node.title;
var baseApi = 'https://api.miil.me/api/users/' + userName + '/photos/public';
var api = this.getMiilApiUrl(baseApi, node.nextUrl, 'callback=pu');
Expand Down
29 changes: 24 additions & 5 deletions src/LayoutForce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,28 +40,36 @@ class LayoutForce {
}

drawGraph () {
var self =this;
var self = this;
var svg = d3.select('#' + this.stageId);

// Linksを反映
var edge = svg.selectAll('.link').data(this.links).enter()
var e = svg.selectAll('.link').data(this.links);
var edge = e.enter()
.append('line')
.attr('class', 'link')
.attr('id', d => {
return 'link-to-' + (d.target.id);
})
.style('stroke', d => {
return this.getEdgeColorByTargetNodeType(d.target.type);
})
.style('stroke-width', d => {
if (d.value !== undefined) return d.value;
return 1;
});
svg.selectAll('link').data(this.links).exit().remove();
e.exit().remove();

// Nodesを反映
var node = svg.selectAll('.node').data(this.nodes).enter()
var n = svg.selectAll('.node').data(this.nodes);
var node = n.enter()
.append('g')
.attr('id', d => {
return 'node-' + d.id;
})
.attr('class', 'node')
.call(this.force.drag);
svg.selectAll('.node').data(this.nodes).exit().remove();
n.exit().remove();

// Node.Circlesを反映
var circle = node.append('circle')
Expand Down Expand Up @@ -157,6 +165,17 @@ class LayoutForce {

}

// ノードとリンクのペアを削除する
removeNode (nodeId, redraw) {
this.nodes = this.nodes.filter(node => {
return (node.id == nodeId) ? null : node;
});
this.links = this.links.filter(link => {
return (link.target.id == nodeId) ? null : link;
});
this.drawGraph();
}

// canvasサイズを設定する
setGraphSize () {
var width = window.innerWidth - this.widthPhotoGallery;
Expand Down
23 changes: 21 additions & 2 deletions src/MiilGraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,15 @@ class MiilGraph extends LayoutForce {
photos.forEach(photo_json => {
var parentNodeId = photo_json[pid];
var me = {
pid: parentNodeId,
id: photo_json.id,
title: photo_json.title,
type: 'photo',
photo_url: photo_json.url,
page_url: photo_json.page_url,
group: parentNodeId
}
group: parentNodeId,
visible: true
};
self.addNode(me);
var parent = self.getNodeById(parentNodeId);
parent.nextUrl = nextUrl;
Expand All @@ -98,6 +100,20 @@ class MiilGraph extends LayoutForce {
m.parseMiilPhotos(callback_res, 'subcategory', m);
}

closeNodeExceptNodeId (id) {
var nodes = this.getNodesAll();
var del_nodeIds = [];
nodes.forEach(node => {
if (node.type === 'photo' && node.pid != id) {
del_nodeIds.push(node.id);
}
});

del_nodeIds.forEach(nid => {
this.removeNode(nid, true);
});
}

// @Override
getFillColorByNodeType (type) {
if (type === 'user' || type === 'root') return '#F4433C';
Expand Down Expand Up @@ -127,11 +143,14 @@ class MiilGraph extends LayoutForce {
this.parseMiilSubCategories(id);
console.info(node);
}else if (type === 'subcategory') {
// 自身以外のサブカテゴリに属するコンテンツを非表示にする
this.closeNodeExceptNodeId(id);
// サブカテゴリに属するコンテンツを展開する
var baseApi = 'https://api.miil.me/api/photos/recent/categories/' + node.id;
var api = this.getMiilApiUrl(baseApi, node.nextUrl, 'callback=ps');
d3.jsonp(api, null);
}else if (type === 'user') {
this.closeNodeExceptNodeId(id);
var userName = node.title;
var baseApi = 'https://api.miil.me/api/users/'+ userName +'/photos/public';
var api = this.getMiilApiUrl(baseApi, node.nextUrl, 'callback=pu');
Expand Down