You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
12 KiB
348 lines
12 KiB
5 years ago
|
init()
|
||
|
|
var tsvPath = ''
|
||
|
|
var titlePath = ''
|
||
|
|
var defaultStartDate
|
||
|
|
var defaultEndDate
|
||
|
|
var totalPosts
|
||
|
|
var startDate
|
||
|
|
var endDate
|
||
|
|
var wordTitleList
|
||
|
|
var randId
|
||
|
|
var globKeyword = ''
|
||
|
|
var stopwords = []
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: '/init',
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(data) {
|
||
|
|
console.log(data)
|
||
|
|
setDate(data.Result.startDate, data.Result.endDate)
|
||
|
|
document.getElementById('keywordBox').value = data.Result.keyword
|
||
|
|
titlePath = data.Result.titlePath
|
||
|
|
tsvString = data.Result.info.tsv
|
||
|
|
defaultStartDate = data.Result.startDate
|
||
|
|
defaultEndDate = data.Result.endDate
|
||
|
|
json = JSON.parse(data.Result.info.json)
|
||
|
|
console.log(json)
|
||
|
|
wordTitleList = json
|
||
|
|
keywordCountString = ''
|
||
|
|
stopwords = data.Result.info.stopWords
|
||
|
|
if (json.info.keyword != '') {
|
||
|
|
keywordCountString = ' 關鍵字出現次數：' + json.info.count
|
||
|
|
}
|
||
|
|
$('#graphInfo').empty()
|
||
|
|
$('#graphInfo').attr('style', 'margin: 10px;').append('總文章數：' + json.info.posts + ',' + keywordCountString)
|
||
|
|
totalPosts = json.info.posts
|
||
|
|
buildSentetree(tsvString)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$(document).ready(function() {
|
||
|
|
$(window).keydown(function(event) {
|
||
|
|
if (event.keyCode == 13) {
|
||
|
|
event.preventDefault()
|
||
|
|
sendRequest()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$(window).on('mousemove', function(e) {
|
||
|
|
$('#nodeTitle').css({
|
||
|
|
left: e.pageX,
|
||
|
|
top: e.pageY
|
||
|
|
})
|
||
|
|
})
|
||
|
|
$('#titleListContainer').hover(
|
||
|
|
function() { // Run on hover/mouseenter
|
||
|
|
$(this).css('overflow', 'auto')
|
||
|
|
},
|
||
|
|
function() { // Run on mouseleave
|
||
|
|
$(this).css('overflow', 'hidden')
|
||
|
|
}
|
||
|
|
)
|
||
|
|
$('#titleListLayer').click(function(e) {
|
||
|
|
if ($('#titleListLayer').is(e.target)) {
|
||
|
|
hideTitles()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('#stopWordEditorLayer').click(function(e) {
|
||
|
|
if ($('#stopWordEditorLayer').is(e.target)) {
|
||
|
|
hideStopWordEditor()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearStopWord() {
|
||
|
|
stopwords = []
|
||
|
|
$('#sweContainer').html('')
|
||
|
|
}
|
||
|
|
|
||
|
|
function addStopWord() {
|
||
|
|
newswRaw = $('#newStopWord').val()
|
||
|
|
newswList = newswRaw.split(' ')
|
||
|
|
for (newsw of newswList) {
|
||
|
|
if (newsw != '') {
|
||
|
|
if (stopwords.includes(newsw)) {
|
||
|
|
|
||
|
|
} else {
|
||
|
|
stopwords.push(newsw)
|
||
|
|
$('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(newsw)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function(e) {
|
||
|
|
var index = $(this).parent().index()
|
||
|
|
console.log(stopwords[index])
|
||
|
|
stopwords.splice(index, 1)
|
||
|
|
console.log(stopwords)
|
||
|
|
$('#sweContainer li').eq(index).remove()
|
||
|
|
}).append("×")))
|
||
|
|
console.log(document.getElementById('sweContainer').children[stopwords.indexOf(newsw)])
|
||
|
|
}
|
||
|
|
document.getElementById("sweContainer").scrollTop = document.getElementById('sweContainer').children[stopwords.indexOf(newsw)].offsetTop
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$('#newStopWord').val('')
|
||
|
|
}
|
||
|
|
|
||
|
|
function showStopwordEditor() {
|
||
|
|
console.log(stopwords)
|
||
|
|
$(window).unbind('keydown')
|
||
|
|
$(window).keydown(function(event) {
|
||
|
|
if (event.keyCode == 13) {
|
||
|
|
addStopWord()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('#sweContainer').empty()
|
||
|
|
for (word of stopwords) {
|
||
|
|
$('#sweContainer').append($('<li>').attr('class', 'w3-display-container').append($('<span>').append(word)).append($('<span>').attr('class', 'w3-button w3-hover-red w3-transparent w3-display-right').click(function(e) {
|
||
|
|
var index = $(this).parent().index()
|
||
|
|
console.log(stopwords[index])
|
||
|
|
stopwords.splice(index, 1)
|
||
|
|
console.log(stopwords)
|
||
|
|
$('#sweContainer li').eq(index).remove()
|
||
|
|
}).append("×")))
|
||
|
|
}
|
||
|
|
$('#stopWordEditorLayer').removeClass('hidden')
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideStopWordEditor() {
|
||
|
|
$(window).unbind('keydown')
|
||
|
|
$(window).keydown(function(event) {
|
||
|
|
if (event.keyCode == 13) {
|
||
|
|
event.preventDefault()
|
||
|
|
sendRequest()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('#stopWordEditorLayer').addClass('hidden')
|
||
|
|
}
|
||
|
|
|
||
|
|
function downloadStopWord() {
|
||
|
|
stopWordString = stopwords.join('\n')
|
||
|
|
download(stopWordString, 'stopwords.txt', 'text/plain')
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function hidePopup() {
|
||
|
|
$('#infoWindowLayer').toggleClass('hidden')
|
||
|
|
$('#progressInfo').html('')
|
||
|
|
$('#progBarInner').css('width', 0 + '%')
|
||
|
|
closeEventListner()
|
||
|
|
}
|
||
|
|
|
||
|
|
function setDate(_startDate, _endDate) {
|
||
|
|
document.getElementById('startDate').value = _startDate
|
||
|
|
document.getElementById("endDate").value = _endDate
|
||
|
|
startDate = _startDate
|
||
|
|
endDate = _endDate
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProgressing(event) {
|
||
|
|
data = JSON.parse(event.data)
|
||
|
|
$('#progressInfo').html(data.comment)
|
||
|
|
$('#progBarInner').css('width', data.progress + '%')
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProgressFinished(event) {
|
||
|
|
data = JSON.parse(event.data)
|
||
|
|
changeGraph(data)
|
||
|
|
hidePopup()
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeEventListner() {
|
||
|
|
progListener.removeEventListener('progressing' + randId, getProgressing)
|
||
|
|
progListener.removeEventListener('progressFinished' + randId, getProgressFinished)
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendRequest() {
|
||
|
|
content = JSON.stringify({
|
||
|
|
startDate: $('#startDate').val(),
|
||
|
|
endDate: $('#endDate').val(),
|
||
|
|
keyword: $('#keywordBox').val(),
|
||
|
|
stopwords: stopwords,
|
||
|
|
pos: {
|
||
|
|
noun: $('#noun').is(':checked'),
|
||
|
|
verb: $('#verb').is(':checked'),
|
||
|
|
adj: $('#adj').is(':checked'),
|
||
|
|
adv: $('#adv').is(':checked'),
|
||
|
|
pron: $('#pron').is(':checked'),
|
||
|
|
aux: $('#aux').is(':checked'),
|
||
|
|
other: $('#other').is(':checked')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
startDate = $('#startDate').val()
|
||
|
|
endDate = $('#endDate').val()
|
||
|
|
console.log(content)
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: '/addRequest',
|
||
|
|
data: content,
|
||
|
|
contentType: 'application/json',
|
||
|
|
success: function(data) {
|
||
|
|
console.log(data)
|
||
|
|
changeGraph(data.Result)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeGraph(data) {
|
||
|
|
console.log(data)
|
||
|
|
tsvString = data.info.tsv
|
||
|
|
json = JSON.parse(data.info.json)
|
||
|
|
globKeyword = json.info.keyword
|
||
|
|
console.log(json)
|
||
|
|
wordTitleList = json
|
||
|
|
keywordCountString = ''
|
||
|
|
if (json.info.keyword != '') {
|
||
|
|
keywordCountString = ', 關鍵字出現次數：' + json.info.count
|
||
|
|
}
|
||
|
|
$('#graphInfo').empty()
|
||
|
|
$('#graphInfo').attr('style', 'margin: 10px;').append('總文章數：' + json.info.posts + keywordCountString)
|
||
|
|
totalPosts = json.info.posts
|
||
|
|
destroyCurrentGraph()
|
||
|
|
d3.select('#graph').append('div').attr('id', 'vis')
|
||
|
|
buildSentetree(tsvString)
|
||
|
|
}
|
||
|
|
|
||
|
|
function destroyCurrentGraph() {
|
||
|
|
d3.selectAll('#vis').remove()
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideTitles() {
|
||
|
|
$('#titleListLayer').addClass('hidden')
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildSentetree(tsvString) {
|
||
|
|
console.log("Build.")
|
||
|
|
var model;
|
||
|
|
var tree;
|
||
|
|
var data;
|
||
|
|
if (typeof tsvString === 'undefined') {
|
||
|
|
d3.tsv(tsvPath, buildTree)
|
||
|
|
} else {
|
||
|
|
data = d3.tsvParse(tsvString)
|
||
|
|
buildTree(_, data)
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildTree(error, rawdata) {
|
||
|
|
const data = rawdata.map(d => Object.assign({}, d, { count: +d.count }));
|
||
|
|
model = new SentenTree.SentenTreeBuilder()
|
||
|
|
.tokenize(SentenTree.tokenizer.tokenizeBySpace)
|
||
|
|
.transformToken(token => (/score(d|s)?/.test(token) ? 'score' : token))
|
||
|
|
.buildModel(data, {
|
||
|
|
maxSupportRatio: 0.8,
|
||
|
|
minSupportRatio: 0.001
|
||
|
|
});
|
||
|
|
tree = new SentenTree.SentenTreeVis('#vis', {
|
||
|
|
fontSize: [15, 40],
|
||
|
|
gapBetweenGraph: 10
|
||
|
|
});
|
||
|
|
tree.data(model.getRenderedGraphs(2))
|
||
|
|
.on('nodeClick', node => {
|
||
|
|
$("#keywordBox").val(node.data.entity)
|
||
|
|
$('#titleListLayer').removeClass('hidden')
|
||
|
|
seqList = node.data.seq.DBs.map(function(n) {
|
||
|
|
return n.rawText
|
||
|
|
})
|
||
|
|
titleList = []
|
||
|
|
for (s of seqList) {
|
||
|
|
titleTemp = wordTitleList[s]
|
||
|
|
if ((titleList.map(function(n) {
|
||
|
|
return n.title
|
||
|
|
})).indexOf(titleTemp.title) == -1) {
|
||
|
|
titleList.push(titleTemp)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(titleList)
|
||
|
|
info = wordTitleList[node.data.entity]
|
||
|
|
$('#titleListKeyword').html(node.data.entity)
|
||
|
|
$('#titleListKeywordInfo').html('')
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: '/ptt/keywordFrequency',
|
||
|
|
data: JSON.stringify({
|
||
|
|
startDate: startDate,
|
||
|
|
endDate: endDate,
|
||
|
|
keyword: node.data.entity,
|
||
|
|
globKeyword: globKeyword
|
||
|
|
}),
|
||
|
|
contentType: 'application/json',
|
||
|
|
success: function(data) {
|
||
|
|
console.log(data)
|
||
|
|
$('#titleListKeywordInfo').html('單詞出現次數：' + data.Result.wordCount + ', 單詞出現的文章數：' + data.Result.postCount + ', 單詞頻率：' + (data.Result.postCount * 100 / totalPosts).toFixed(2) + '%')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('#titleListContainer').empty()
|
||
|
|
for (i of titleList) {
|
||
|
|
$('#titleListContainer').append(
|
||
|
|
$('<li>').attr('class', 'w3-panel').append(
|
||
|
|
$('<a>').attr('href', i.url).attr('target', '_blank').append(
|
||
|
|
$('<h4>').html(i.title)
|
||
|
|
).append(
|
||
|
|
$('<span>').attr('style', 'margin: 0px 10px').html(i.author)
|
||
|
|
).append(
|
||
|
|
$('<span>').attr('style', 'margin: 0px 10px').html(i.date)
|
||
|
|
).append(
|
||
|
|
$('<span>').attr('style', 'margin: 0px 10px').html('推文數：' + i.pushes)
|
||
|
|
)
|
||
|
|
)
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.on('nodeMouseenter', node => {
|
||
|
|
console.log(node)
|
||
|
|
titles = node.data.topEntries.map(function(x) {
|
||
|
|
return wordTitleList[x.rawText]
|
||
|
|
})
|
||
|
|
//console.log(titles)
|
||
|
|
infoStr = ''
|
||
|
|
for (index in titles) {
|
||
|
|
if (index == 0) {
|
||
|
|
infoStr += titles[index].title + '<br>'
|
||
|
|
} else {
|
||
|
|
if (titles[index].title != titles[index - 1].title) {
|
||
|
|
infoStr += titles[index].title + '<br>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
pos = titles[index].part.indexOf(node.data.entity)
|
||
|
|
infoStr += '... ' + titles[index].part.slice(Math.max(0, pos - 20), Math.min(titles[index].part.length - 1, pos + 20)) + ' ...<br>'
|
||
|
|
}
|
||
|
|
$(nodeTitleContent).html(infoStr)
|
||
|
|
$('#nodeTitle').removeClass('hidden')
|
||
|
|
tree.highlightNeighbors(node)
|
||
|
|
})
|
||
|
|
.on('nodeMouseleave', node => {
|
||
|
|
$('#nodeTitle').addClass('hidden')
|
||
|
|
tree.clearHighlightNeighbors()
|
||
|
|
}).on('layoutStart', layout => {
|
||
|
|
console.log(layout)
|
||
|
|
}).on('linkMouseenter', link => {
|
||
|
|
console.log(link)
|
||
|
|
})
|
||
|
|
new ResizeSensor(jQuery('#d3kitRoot'), function() {
|
||
|
|
var scale, origin;
|
||
|
|
scale = Math.min(2, ($('#graph').outerWidth()) / ($('#d3kitRoot').outerWidth() + 60))
|
||
|
|
|
||
|
|
$('#vis').css({
|
||
|
|
transform: "scale(" + scale + ")",
|
||
|
|
'transform-origin': 'top left'
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|