Freecodecamp: [๋ฒ ํƒ€] D3: "์‹๋ณ„์ž '๋ฐ์ดํ„ฐ ์„ธํŠธ'๊ฐ€ ์ด๋ฏธ ์„ ์–ธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค." ์˜ค๋ฅ˜

์— ๋งŒ๋“  2017๋…„ 11์›” 12์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: freeCodeCamp/freeCodeCamp



์ฑŒ๋ฆฐ์ง€ ์ด๋ฆ„


https://beta.freecodecamp.org/en/challenges/data-visualization-with-d3/change-styles-based-on-data

๋ฌธ์ œ ์„ค๋ช…


๋ฒ ํƒ€ ๋ฒ„์ „์˜ D3 ์ฑŒ๋ฆฐ์ง€๋ฅผ ํ†ตํ•ด "์‹๋ณ„์ž '๋ฐ์ดํ„ฐ ์„ธํŠธ'๊ฐ€ ์ด๋ฏธ ์„ ์–ธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค."๋ผ๋Š” ์˜ค๋ฅ˜๊ฐ€ ํ•ญ์ƒ ํ‘œ์‹œ๋˜๋Š” ์—ฌ๋Ÿฌ ์ฑŒ๋ฆฐ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. const dataset ํ–‰์„ ์ฃผ์„ ์ฒ˜๋ฆฌํ•˜๋ฉด ์†”๋ฃจ์…˜์ด ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„๊ทธ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ํฌ๋กฌ์—์„œ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. Firefox ํ€€ํ…€์—์„œ ์ด ์˜ค๋ฅ˜๋ฅผ ํ™•์ธํ–ˆ์ง€๋งŒ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ € ์ •๋ณด

  • ๋ธŒ๋ผ์šฐ์ € ์ด๋ฆ„, ๋ฒ„์ „: Chrome 61.0.3163.100
  • ์šด์˜ ์ฒด์ œ: ์œˆ๋„์šฐ 10 ํ”„๋กœ
  • ๋ชจ๋ฐ”์ผ, ๋ฐ์Šคํฌํƒ‘ ๋˜๋Š” ํƒœ๋ธ”๋ฆฟ: ๋ฐ์Šคํฌํƒ‘

๊ท€ํ•˜์˜ ์ฝ”๋“œ



<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      .text((d) => (d + " USD"))
      // Add your code below this line



      // Add your code above this line
  </script>
</body>


์Šคํฌ๋ฆฐ์ƒท


screenshot_1

help wanted learn

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์ดํ›„ ๋ฒ„์ „์˜ Chrome(62 ๋ฐ 63)์—์„œ const dataset ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ๊ฒฝ์šฐ๋ฅผ ํ…Œ์ŠคํŠธํ–ˆ์ง€๋งŒ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์ดํ›„ ๋ฒ„์ „์˜ Chrome(62 ๋ฐ 63)์—์„œ const dataset ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ๊ฒฝ์šฐ๋ฅผ ํ…Œ์ŠคํŠธํ–ˆ์ง€๋งŒ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ์ด PR์˜ ์ผ๋ถ€๋กœ ์ˆ˜์ •๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. #16149

ํ…Œ์ŠคํŠธ๋Š” ์ด์ œ ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์—์„œ ์‹คํ–‰๋˜์–ด ์ด์ „ ์‹คํ–‰์˜ ๋ฒ”์œ„์™€์˜ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๋„ค, ํ™•์ธํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰