- Java로 워드클라우드 기능을 구현함에 앞서 글자크기는 DB 데이터 중 동일한 컬럼에서의 중복값으로 크기를 정했습니다
- d3.js는 인터넷이 되는 환경에서의 코드로 작성했습니다
1. 동일한 컬럼에서의 중복값 찾기 쿼리 - 제목과 제목컬럼에 대한 동일 값의 카운트를 글자의 크기로 담고자 AS MOUNT 에 담았어요
<select id="wordcloudlist" resultType="WordcloudDTO">
SELECT
SUBJECT
,count(*) AS MOUNT
FROM
TABLE
GROUP BY
SUBJECT
HAVING count(*) >1
</select>
2. Java 단에서 리스트를 json형식으로 넘기기
@RequestMapping(value="/wordcloudtest.do", method = RequestMethod.GET, produces = "application/text; charset=UTF-8" )
@ResponseBody
public String wordcloud(HttpServletRequest request,WordcloudDTO WordcloudDTO) throws Exception{
List<WordcloudDTO> list = dao.list(WordcloudDTO);
String json = null;
try {
json = new ObjectMapper().writeValueAsString(list);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return json;
}
3. Jsp 화면단에서 표현하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js" type="text/JavaScript"></script>
<style>
body {
font-family:"Lucida Grande","Droid Sans",Arial,Helvetica,sans-serif;
}
.legend {
border: 1px solid #555555;
border-radius: 5px 5px 5px 5px;
font-size: 0.8em;
margin: 10px;
padding: 10px;
}
.bld {
font-weight: bold;
}
</style>
</head>
<body>
<div id="wordcloud" align="center" >
</div>
<script>
var wordcloudlist = $.ajax({
type: "GET",
url: "wordcloudtest.do",
dataType: "json",
contentType: "application/json; charset:UTF-8",
async: false
}).responseText;
var wordcloudtest = [{"subject":"맨유","mount":40},{"subject":"맨사타","mount":15},{"subject":"첼시","mount":10},{"subject":"토트넘","mount":35},{"subject":"리버풀","mount":30},{"subject":"인천유나이티드","mount":20}];
var x = JSON.parse(wordcloudlist);
var y = wordcloudtest
console.log("Json데이터 ",x)
console.log("11",y)
var color = d3.scale.linear() //선형적인 스케일로 표준화를 시킨다.
.domain([0,1,2,3,4,5,6,10,15,20,100])//데이터의 범위, 입력 크기
.range([0.50]);//표시할 범위, 출력 크기
//ex)"#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"
d3.layout.cloud().size([800, 300]) //[width,height]
.words(x)
.rotate(0)
.fontSize(function(d) { return d.mount; })
.on("end", draw)
.start();
function draw(words) {
d3.select("#wordcloud").append("svg")//wordcloud 테이블에 svg를 붙이고
.attr("width", 850)
.attr("height", 350)
.attr("class", "wordcloud")
.append("g")
.attr("transform", "translate(320,200)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.mount + "px"; })
.style("fill", function(d, i) { return color(i); })
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.subject; });
}
</script>
</body>
</html>
json 형식으로 받을시 wordcloudtest 형식처럼 받아야해요
이상입니다~!!
'Java' 카테고리의 다른 글
| Java main 메서드 실행하기(F11) (0) | 2024.02.12 |
|---|---|
| Spring - Java 로 게시판 구글차트(chart.js) 기능 만들기 (0) | 2021.02.05 |
댓글