{"id":133523,"date":"2025-02-02T20:07:16","date_gmt":"2025-02-02T14:07:16","guid":{"rendered":"http:\/\/rcl-radio.ru\/?p=133523"},"modified":"2025-02-02T20:07:16","modified_gmt":"2025-02-02T14:07:16","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d0%b0%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d1%85-%d0%b4%d0%b8%d0%b0%d0%b3%d1%80%d0%b0%d0%bc%d0%bc-%d1%81-%d0%bf%d0%be","status":"publish","type":"post","link":"http:\/\/rcl-radio.ru\/?p=133523","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e D3.js"},"content":{"rendered":"

D3.js \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c, \u043a\u0430\u0440\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e D3.js.<\/span><\/p>\n

\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/span><\/strong><\/p>\n

\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Node.js \u0438 npm. \u0417\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0448\u0430\u0433\u0438:<\/span><\/p>\n

    \n
  1. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043d\u0435\u0435:<\/span><\/li>\n<\/ol>\n
    mkdir d3-project\r\ncd d3-project<\/code><\/pre>\n
      \n
    1. \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 npm:<\/span><\/li>\n<\/ol>\n
      \n
      npm init -y<\/code><\/pre>\n<\/div>\n
        \n
      1. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 D3.js:<\/span><\/li>\n<\/ol>\n
        \n
        npm install d3<\/code><\/pre>\n<\/div>\n
          \n
        1. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b\u00a0index.html<\/code>\u00a0\u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/span><\/li>\n<\/ol>\n
          \n
          <!<\/span>DOCTYPE<\/span>\u00a0html<\/span>><\/span><\/span>\r\n<<\/span>html\u00a0lang<\/span>=<\/span>\"<\/span>en\"<\/span><\/span>><\/span><\/span>\r\n<<\/span>head><\/span><\/span>\r\n    <<\/span>meta\u00a0charset<\/span>=<\/span>\"<\/span>UTF-8\"<\/span><\/span>><\/span><\/span>\r\n    <<\/span>meta\u00a0name<\/span>=<\/span>\"<\/span>viewport\"<\/span><\/span>\u00a0content<\/span>=<\/span>\"<\/span>width=device-width, initial-scale=1.0\"<\/span><\/span>><\/span><\/span>\r\n    <<\/span>title><\/span><\/span>D3.js Interactive Diagram<\/<\/span>title><\/span><\/span>\r\n<\/<\/span>head><\/span><\/span>\r\n<<\/span>body><\/span><\/span>\r\n    <<\/span>div\u00a0id<\/span>=<\/span>\"<\/span>chart\"<\/span><\/span>><\/span><\/span><\/<\/span>div><\/span><\/span>\r\n    <<\/span>script\u00a0src<\/span>=<\/span>\"<\/span>node_modules\/d3\/dist\/d3.min.js\"<\/span><\/span>><\/span><\/span><\/<\/span>script><\/span><\/span>\r\n    <<\/span>script\u00a0src<\/span>=<\/span>\"<\/span>app.js\"<\/span><\/span>><\/span><\/span><\/<\/span>script><\/span><\/span>\r\n<\/<\/span>body><\/span><\/span>\r\n<\/<\/span>html><\/span><\/span><\/code><\/pre>\n<\/div>\n
            \n
          1. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b\u00a0app.js<\/code>\u00a0\u0440\u044f\u0434\u043e\u043c \u0441\u00a0index.html<\/code>:<\/span><\/li>\n<\/ol>\n
            \n
            \/\/ app.js<\/span>\r\nconsole.<\/span>log<\/span>(<\/span>\"Hello from D3.js!\"<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
            \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c!<\/span><\/p>\n
            \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a<\/span><\/strong><\/p>\n
            \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u2014 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<\/span><\/p>\n
              \n
            1. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b\u00a0app.js<\/code>\u00a0\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/span><\/li>\n<\/ol>\n
              \n
              \/\/ app.js<\/span>\r\nconst<\/span> data =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\nconst<\/span> svgWidth =<\/span> 500<\/span>,<\/span> svgHeight =<\/span> 300<\/span>;<\/span>\r\nconst<\/span> margin =<\/span> {<\/span> top<\/span>:<\/span> 20<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> bottom<\/span>:<\/span> 30<\/span>,<\/span> left<\/span>:<\/span> 40<\/span> }<\/span>;<\/span>\r\nconst<\/span> width =<\/span> svgWidth -<\/span> margin.<\/span>left -<\/span> margin.<\/span>right;<\/span>\r\nconst<\/span> height =<\/span> svgHeight -<\/span> margin.<\/span>top -<\/span> margin.<\/span>bottom;<\/span>\r\n\r\nconst<\/span> svg =<\/span> d3.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `<\/span>translate(<\/span>${<\/span>margin.<\/span>left}<\/span><\/span>,<\/span>${<\/span>margin.<\/span>top}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> xScale =<\/span> d3.<\/span>scaleLinear<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>[<\/span>0<\/span>,<\/span> d3.<\/span>max<\/span>(<\/span>data)<\/span>]<\/span>)<\/span>\r\n    .<\/span>range<\/span>(<\/span>[<\/span>0<\/span>,<\/span> width]<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> yScale =<\/span> d3.<\/span>scaleBand<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>d3.<\/span>range<\/span>(<\/span>data.<\/span>length)<\/span>)<\/span>\r\n    .<\/span>rangeRound<\/span>(<\/span>[<\/span>0<\/span>,<\/span> height]<\/span>)<\/span>\r\n    .<\/span>paddingInner<\/span>(<\/span>0.05<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> lineGenerator =<\/span> d3.<\/span>line<\/span>(<\/span>)<\/span>\r\n    .<\/span>x<\/span>(<\/span>(<\/span>d,<\/span>\u00a0i<\/span>)<\/span> =><\/span> xScale<\/span>(<\/span>i)<\/span>)<\/span>\r\n    .<\/span>y<\/span>(<\/span>yScale)<\/span>;<\/span>\r\n\r\nsvg.<\/span>append<\/span>(<\/span>\"path\"<\/span>)<\/span>\r\n    .<\/span>datum<\/span>(<\/span>data)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"fill\"<\/span>,<\/span> \"none\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"stroke\"<\/span>,<\/span> \"steelblue\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"stroke-width\"<\/span>,<\/span> 1.5<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"d\"<\/span>,<\/span> lineGenerator)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
                \n
              1. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435\u00a0index.html<\/code>\u00a0\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a.<\/span><\/li>\n<\/ol>\n
                \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/span><\/strong><\/p>\n
                \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0441 \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c.<\/span><\/p>\n
                  \n
                1. \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u0430\u0439\u043b\u00a0app.js<\/code>\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/li>\n<\/ol>\n
                  \n
                  \/\/ app.js<\/span>\r\nconst<\/span> data =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\nconst<\/span> svgWidth =<\/span> 500<\/span>,<\/span> svgHeight =<\/span> 300<\/span>;<\/span>\r\nconst<\/span> margin =<\/span> {<\/span> top<\/span>:<\/span> 20<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> bottom<\/span>:<\/span> 30<\/span>,<\/span> left<\/span>:<\/span> 40<\/span> }<\/span>;<\/span>\r\nconst<\/span> width =<\/span> svgWidth -<\/span> margin.<\/span>left -<\/span> margin.<\/span>right;<\/span>\r\nconst<\/span> height =<\/span> svgHeight -<\/span> margin.<\/span>top -<\/span> margin.<\/span>bottom;<\/span>\r\n\r\nconst<\/span> svg =<\/span> d3.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `<\/span>translate(<\/span>${<\/span>margin.<\/span>left}<\/span><\/span>,<\/span>${<\/span>margin.<\/span>top}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> xScale =<\/span> d3.<\/span>scaleLinear<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>[<\/span>0<\/span>,<\/span> d3.<\/span>max<\/span>(<\/span>data)<\/span>]<\/span>)<\/span>\r\n    .<\/span>range<\/span>(<\/span>[<\/span>0<\/span>,<\/span> width]<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> yScale =<\/span> d3.<\/span>scaleBand<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>d3.<\/span>range<\/span>(<\/span>data.<\/span>length)<\/span>)<\/span>\r\n    .<\/span>rangeRound<\/span>(<\/span>[<\/span>0<\/span>,<\/span> height]<\/span>)<\/span>\r\n    .<\/span>paddingInner<\/span>(<\/span>0.05<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> lineGenerator =<\/span> d3.<\/span>line<\/span>(<\/span>)<\/span>\r\n    .<\/span>x<\/span>(<\/span>(<\/span>d,<\/span>\u00a0i<\/span>)<\/span> =><\/span> xScale<\/span>(<\/span>i)<\/span>)<\/span>\r\n    .<\/span>y<\/span>(<\/span>yScale)<\/span>;<\/span>\r\n\r\nsvg.<\/span>append<\/span>(<\/span>\"path\"<\/span>)<\/span>\r\n    .<\/span>datum<\/span>(<\/span>data)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"fill\"<\/span>,<\/span> \"none\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"stroke\"<\/span>,<\/span> \"steelblue\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"stroke-width\"<\/span>,<\/span> 1.5<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"d\"<\/span>,<\/span> lineGenerator)<\/span>;<\/span>\r\n\r\nconst<\/span> tooltip =<\/span> d3.<\/span>select<\/span>(<\/span>\"body\"<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"div\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"tooltip\"<\/span>)<\/span>\r\n    .<\/span>style<\/span>(<\/span>\"opacity\"<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>\r\n\r\nsvg.<\/span>selectAll<\/span>(<\/span>\".dot\"<\/span>)<\/span>\r\n    .<\/span>data<\/span>(<\/span>data)<\/span>\r\n    .<\/span>enter<\/span>(<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"circle\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"dot\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"cx\"<\/span>,<\/span> (<\/span>d,<\/span>\u00a0i<\/span>)<\/span> =><\/span> xScale<\/span>(<\/span>i)<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"cy\"<\/span>,<\/span> yScale)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"r\"<\/span>,<\/span> 5<\/span>)<\/span>\r\n    .<\/span>on<\/span>(<\/span>\"mouseover\"<\/span>,<\/span> function<\/span>(<\/span>event,<\/span>\u00a0d<\/span>)<\/span> {<\/span>\r\n        tooltip.<\/span>transition<\/span>(<\/span>)<\/span>\r\n            .<\/span>duration<\/span>(<\/span>200<\/span>)<\/span>\r\n            .<\/span>style<\/span>(<\/span>\"opacity\"<\/span>,<\/span> 0.9<\/span>)<\/span>;<\/span>\r\n        tooltip.<\/span>html<\/span>(<\/span>d)<\/span>\r\n            .<\/span>style<\/span>(<\/span>\"left\"<\/span>,<\/span> event.<\/span>pageX +<\/span> \"px\"<\/span>)<\/span>\r\n            .<\/span>style<\/span>(<\/span>\"top\"<\/span>,<\/span> event.<\/span>pageY +<\/span> \"px\"<\/span>)<\/span>;<\/span>\r\n    }<\/span>)<\/span>\r\n    .<\/span>on<\/span>(<\/span>\"mouseout\"<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\r\n        tooltip.<\/span>transition<\/span>(<\/span>)<\/span>\r\n            .<\/span>duration<\/span>(<\/span>500<\/span>)<\/span>\r\n            .<\/span>style<\/span>(<\/span>\"opacity\"<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>\r\n    }<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
                    \n
                  1. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b\u00a0index.html<\/code>:<\/span><\/li>\n<\/ol>\n
                    \n
                    <<\/span>style><\/span><\/span>\u00a0.tooltip<\/span>\u00a0{<\/span>\u00a0position<\/span>:<\/span>\u00a0absolute;<\/span>\u00a0text-align<\/span>:<\/span>\u00a0center;<\/span>\u00a0padding<\/span>:<\/span>\u00a05px;<\/span>\u00a0font-size<\/span>:<\/span>\u00a012px;<\/span>\u00a0background-color<\/span>:<\/span>\u00a0white;<\/span>\u00a0border<\/span>:<\/span>\u00a01px solid #ddd;<\/span>\u00a0pointer-events<\/span>:<\/span>\u00a0none;<\/span>\u00a0opacity<\/span>:<\/span>\u00a00;<\/span>\u00a0}<\/span>\u00a0<\/span><\/span><\/<\/span>style><\/span><\/span><\/code><\/pre>\n<\/div>\n
                      \n
                    1. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0442\u043e\u0447\u043a\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430 \u0441 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<\/span><\/li>\n<\/ol>\n
                      \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/span><\/strong><\/p>\n
                      \u0412\u043e\u0442 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f D3.js \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c:<\/span><\/p>\n
                      \u0413\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0430<\/span><\/strong><\/p>\n
                      \n
                      \"\"<\/a><\/p>\n
                      \/\/ app.js<\/span>\r\nconst<\/span> data =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\nconst<\/span> svgWidth =<\/span> 500<\/span>,<\/span> svgHeight =<\/span> 300<\/span>;<\/span>\r\nconst<\/span> margin =<\/span> {<\/span> top<\/span>:<\/span> 20<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> bottom<\/span>:<\/span> 30<\/span>,<\/span> left<\/span>:<\/span> 40<\/span> }<\/span>;<\/span>\r\nconst<\/span> width =<\/span> svgWidth -<\/span> margin.<\/span>left -<\/span> margin.<\/span>right;<\/span>\r\nconst<\/span> height =<\/span> svgHeight -<\/span> margin.<\/span>top -<\/span> margin.<\/span>bottom;<\/span>\r\n\r\nconst<\/span> svg =<\/span> d3.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `<\/span>translate(<\/span>${<\/span>margin.<\/span>left}<\/span><\/span>,<\/span>${<\/span>margin.<\/span>top}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> xScale =<\/span> d3.<\/span>scaleBand<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>d3.<\/span>range<\/span>(<\/span>data.<\/span>length)<\/span>)<\/span>\r\n    .<\/span>rangeRound<\/span>(<\/span>[<\/span>0<\/span>,<\/span> width]<\/span>)<\/span>\r\n    .<\/span>paddingInner<\/span>(<\/span>0.05<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> yScale =<\/span> d3.<\/span>scaleLinear<\/span>(<\/span>)<\/span>\r\n    .<\/span>domain<\/span>(<\/span>[<\/span>0<\/span>,<\/span> d3.<\/span>max<\/span>(<\/span>data)<\/span>]<\/span>)<\/span>\r\n    .<\/span>range<\/span>(<\/span>[<\/span>height,<\/span> 0<\/span>]<\/span>)<\/span>;<\/span>\r\n\r\nsvg.<\/span>selectAll<\/span>(<\/span>\".bar\"<\/span>)<\/span>\r\n    .<\/span>data<\/span>(<\/span>data)<\/span>\r\n    .<\/span>enter<\/span>(<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"rect\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"bar\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"x\"<\/span>,<\/span> (<\/span>d,<\/span>\u00a0i<\/span>)<\/span> =><\/span> xScale<\/span>(<\/span>i)<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"y\"<\/span>,<\/span> d<\/span> =><\/span> yScale<\/span>(<\/span>d)<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> xScale.<\/span>bandwidth<\/span>(<\/span>)<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> d<\/span> =><\/span> height -<\/span> yScale<\/span>(<\/span>d)<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
                      \u041a\u0440\u0443\u0433\u043e\u0432\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430<\/span><\/strong><\/p>\n
                      \n
                      \"\"<\/a><\/p>\n
                      \/\/ app.js<\/span>\r\nconst<\/span> data =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\nconst<\/span> svgWidth =<\/span> 400<\/span>,<\/span> svgHeight =<\/span> 400<\/span>;<\/span>\r\nconst<\/span> radius =<\/span> Math.<\/span>min<\/span>(<\/span>svgWidth,<\/span> svgHeight)<\/span> \/<\/span> 2<\/span>;<\/span>\r\n\r\nconst<\/span> color =<\/span> d3.<\/span>scaleOrdinal<\/span>(<\/span>)<\/span>\r\n    .<\/span>range<\/span>(<\/span>[<\/span>\"#98abc5\"<\/span>,<\/span> \"#8a89a6\"<\/span>,<\/span> \"#7b6888\"<\/span>,<\/span> \"#6b486b\"<\/span>,<\/span> \"#a05d56\"<\/span>]<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> pie =<\/span> d3.<\/span>pie<\/span>(<\/span>)<\/span>\r\n    .<\/span>value<\/span>(<\/span>d<\/span> =><\/span> d)<\/span>;<\/span>\r\n\r\nconst<\/span> arc =<\/span> d3.<\/span>arc<\/span>(<\/span>)<\/span>\r\n    .<\/span>outerRadius<\/span>(<\/span>radius -<\/span> 10<\/span>)<\/span>\r\n    .<\/span>innerRadius<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> labelArc =<\/span> d3.<\/span>arc<\/span>(<\/span>)<\/span>\r\n    .<\/span>outerRadius<\/span>(<\/span>radius -<\/span> 40<\/span>)<\/span>\r\n    .<\/span>innerRadius<\/span>(<\/span>radius -<\/span> 40<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> svg =<\/span> d3.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight)<\/span>\r\n    .<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `<\/span>translate(<\/span>${<\/span>svgWidth\u00a0\/<\/span>\u00a02<\/span>}<\/span><\/span>,\u00a0<\/span>${<\/span>svgHeight\u00a0\/<\/span>\u00a02<\/span>}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> g =<\/span> svg.<\/span>selectAll<\/span>(<\/span>\".arc\"<\/span>)<\/span>\r\n    .<\/span>data<\/span>(<\/span>pie<\/span>(<\/span>data)<\/span>)<\/span>\r\n    .<\/span>enter<\/span>(<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"arc\"<\/span>)<\/span>;<\/span>\r\n\r\ng.<\/span>append<\/span>(<\/span>\"path\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"d\"<\/span>,<\/span> arc)<\/span>\r\n    .<\/span>style<\/span>(<\/span>\"fill\"<\/span>,<\/span> (<\/span>d,<\/span>\u00a0i<\/span>)<\/span> =><\/span> color<\/span>(<\/span>i)<\/span>)<\/span>;<\/span>\r\n\r\ng.<\/span>append<\/span>(<\/span>\"text\"<\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> d<\/span> =><\/span> `<\/span>translate(<\/span>${<\/span>labelArc.<\/span>centroid<\/span>(<\/span>d)<\/span>}<\/span><\/span>)<\/span>`<\/span><\/span>)<\/span>\r\n    .<\/span>attr<\/span>(<\/span>\"dy\"<\/span>,<\/span> \".35em\"<\/span>)<\/span>\r\n    .<\/span>text<\/span>(<\/span>d<\/span> =><\/span> `<\/span>${<\/span>d.<\/span>data}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n
                      \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u0430\u043b\u0430 \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 D3.js \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c. \u0425\u043e\u0442\u044f \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043b\u0438\u0448\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, D3.js \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439.<\/p>\n
                      \n
                      \u041f\u0440\u0438\u043c\u0435\u0440 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e D3.js, \u0432 \u043e\u0434\u043d\u043e\u043c HTML-\u0444\u0430\u0439\u043b\u0435:<\/p>\n
                      <<\/span>!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>title<\/span>><\/span>\u0413\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0430<\/span> \u0441<\/span> D3<\/span>.<\/span>js<\/span><<\/span>\/<\/span>title<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>style<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>family<\/span>:<\/span> Arial<\/span>,<\/span> sans<\/span>-<\/span>serif<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>bar<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fill<\/span>:<\/span> steelblue<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>axis<\/span> path<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>axis<\/span> line<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fill<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0stroke<\/span>:<\/span> black<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0shape<\/span>-<\/span>rendering<\/span>:<\/span> crispEdges<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>style<\/span>><\/span>\r\n<<\/span>\/<\/span>head<\/span>><\/span>\r\n<<\/span>body<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>div<\/span> id<\/span>=<\/span>\"chart\"<\/span>><\/span><<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span> src<\/span>=<\/span>\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/6.7.0\/d3.min.js\"<\/span>><\/span><<\/span>\/<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> data<\/span> =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> svgWidth<\/span> =<\/span> 500<\/span>,<\/span> svgHeight<\/span> =<\/span> 300<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> margin<\/span> =<\/span> {<\/span> top<\/span>:<\/span> 20<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> bottom<\/span>:<\/span> 30<\/span>,<\/span> left<\/span>:<\/span> 40<\/span> }<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> width<\/span> =<\/span> svgWidth<\/span> -<\/span> margin<\/span>.<\/span>left<\/span> -<\/span> margin<\/span>.<\/span>right<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> height<\/span> =<\/span> svgHeight<\/span> -<\/span> margin<\/span>.<\/span>top<\/span> -<\/span> margin<\/span>.<\/span>bottom<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SVG-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> svg<\/span> =<\/span> d3<\/span>.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `translate<\/span>(<\/span>$<\/span>{<\/span>margin<\/span>.<\/span>left<\/span>}<\/span>,<\/span>$<\/span>{<\/span>margin<\/span>.<\/span>top<\/span>}<\/span>)<\/span>`<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u0435\u0439<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> xScale<\/span> =<\/span> d3<\/span>.<\/span>scaleBand<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>domain<\/span>(<\/span>d3<\/span>.<\/span>range<\/span>(<\/span>data<\/span>.<\/span>length<\/span>)<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>rangeRound<\/span>(<\/span>[<\/span>0<\/span>,<\/span> width<\/span>]<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>paddingInner<\/span>(<\/span>0.05<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> yScale<\/span> =<\/span> d3<\/span>.<\/span>scaleLinear<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>domain<\/span>(<\/span>[<\/span>0<\/span>,<\/span> d3<\/span>.<\/span>max<\/span>(<\/span>data<\/span>)<\/span>]<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>range<\/span>(<\/span>[<\/span>height<\/span>,<\/span> 0<\/span>]<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041e\u0441\u0438<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> xAxis<\/span> =<\/span> d3<\/span>.<\/span>axisBottom<\/span>(<\/span>xScale<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> yAxis<\/span> =<\/span> d3<\/span>.<\/span>axisLeft<\/span>(<\/span>yScale<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0svg<\/span>.<\/span>selectAll<\/span>(<\/span>\".bar\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>data<\/span>(<\/span>data<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>enter<\/span>(<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"rect\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"bar\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"x\"<\/span>,<\/span> (<\/span>d<\/span>,<\/span> i<\/span>)<\/span> =<\/span>><\/span> xScale<\/span>(<\/span>i<\/span>)<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"y\"<\/span>,<\/span> d<\/span> =<\/span>><\/span> yScale<\/span>(<\/span>d<\/span>)<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> xScale<\/span>.<\/span>bandwidth<\/span>(<\/span>)<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> d<\/span> =<\/span>><\/span> height<\/span> -<\/span> yScale<\/span>(<\/span>d<\/span>)<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0441\u0435\u0439<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0svg<\/span>.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"x axis\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `translate<\/span>(<\/span>0<\/span>,<\/span>$<\/span>{<\/span>height<\/span>}<\/span>)<\/span>`<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>call<\/span>(<\/span>xAxis<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0svg<\/span>.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"y axis\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>call<\/span>(<\/span>yAxis<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>script<\/span>><\/span>\r\n<<\/span>\/<\/span>body<\/span>><\/span>\r\n<<\/span>\/<\/span>html<\/span>><\/span>\r\n<\/pre>\n
                      \n
                      \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b (\u043f\u0438\u0440\u043e\u0433\u0430), \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e D3.js, \u0432 \u043e\u0434\u043d\u043e\u043c HTML-\u0444\u0430\u0439\u043b\u0435:<\/span><\/p>\n
                      <<\/span>!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>title<\/span>><\/span>\u041a\u0440\u0443\u0433\u043e\u0432\u0430\u044f<\/span> \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430<\/span> \u0441<\/span> D3<\/span>.<\/span>js<\/span><<\/span>\/<\/span>title<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>style<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>family<\/span>:<\/span> Arial<\/span>,<\/span> sans<\/span>-<\/span>serif<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>arc<\/span> text<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>size<\/span>:<\/span> 12px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fill<\/span>:<\/span> #333<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>style<\/span>><\/span>\r\n<<\/span>\/<\/span>head<\/span>><\/span>\r\n<<\/span>body<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>div<\/span> id<\/span>=<\/span>\"chart\"<\/span>><\/span><<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span> src<\/span>=<\/span>\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/6.7.0\/d3.min.js\"<\/span>><\/span><<\/span>\/<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> data<\/span> =<\/span> [<\/span>10<\/span>,<\/span> 20<\/span>,<\/span> 30<\/span>,<\/span> 40<\/span>,<\/span> 50<\/span>]<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> svgWidth<\/span> =<\/span> 400<\/span>,<\/span> svgHeight<\/span> =<\/span> 400<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> radius<\/span> =<\/span> Math<\/span>.<\/span>min<\/span>(<\/span>svgWidth<\/span>,<\/span> svgHeight<\/span>)<\/span> \/<\/span> 2<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0448\u043a\u0430\u043b\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> color<\/span> =<\/span> d3<\/span>.<\/span>scaleOrdinal<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>range<\/span>(<\/span>[<\/span>\"#98abc5\"<\/span>,<\/span> \"#8a89a6\"<\/span>,<\/span> \"#7b6888\"<\/span>,<\/span> \"#6b486b\"<\/span>,<\/span> \"#a05d56\"<\/span>]<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0438\u0440\u043e\u0433\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> pie<\/span> =<\/span> d3<\/span>.<\/span>pie<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>value<\/span>(<\/span>d<\/span> =<\/span>><\/span> d<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0414\u0443\u0433\u0438<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> arc<\/span> =<\/span> d3<\/span>.<\/span>arc<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>outerRadius<\/span>(<\/span>radius<\/span> -<\/span> 10<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>innerRadius<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u043a<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> labelArc<\/span> =<\/span> d3<\/span>.<\/span>arc<\/span>(<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>outerRadius<\/span>(<\/span>radius<\/span> -<\/span> 40<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>innerRadius<\/span>(<\/span>radius<\/span> -<\/span> 40<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SVG-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> svg<\/span> =<\/span> d3<\/span>.<\/span>select<\/span>(<\/span>\"#chart\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>append<\/span>(<\/span>\"svg\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"width\"<\/span>,<\/span> svgWidth<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"height\"<\/span>,<\/span> svgHeight<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> `translate<\/span>(<\/span>$<\/span>{<\/span>svgWidth<\/span> \/<\/span> 2<\/span>}<\/span>,<\/span> $<\/span>{<\/span>svgHeight<\/span> \/<\/span> 2<\/span>}<\/span>)<\/span>`<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0434\u0443\u0433\u0438<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> arcs<\/span> =<\/span> pie<\/span>(<\/span>data<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0434\u0443\u0433\u0438<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0svg<\/span>.<\/span>selectAll<\/span>(<\/span>\".arc\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>data<\/span>(<\/span>arcs<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>enter<\/span>(<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"g\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"class\"<\/span>,<\/span> \"arc\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>each<\/span>(<\/span>function<\/span>(<\/span>d<\/span>,<\/span> i<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0d3<\/span>.<\/span>select<\/span>(<\/span>this<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"path\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"d\"<\/span>,<\/span> arc<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>style<\/span>(<\/span>\"fill\"<\/span>,<\/span> color<\/span>(<\/span>i<\/span>)<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0d3<\/span>.<\/span>select<\/span>(<\/span>this<\/span>)<\/span>.<\/span>append<\/span>(<\/span>\"text\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"transform\"<\/span>,<\/span> d<\/span> =<\/span>><\/span> `translate<\/span>(<\/span>$<\/span>{<\/span>labelArc<\/span>.<\/span>centroid<\/span>(<\/span>d<\/span>)<\/span>}<\/span>)<\/span>`<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>attr<\/span>(<\/span>\"dy\"<\/span>,<\/span> \".35em\"<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>text<\/span>(<\/span>d<\/span> =<\/span>><\/span> `$<\/span>{<\/span>d<\/span>.<\/span>data<\/span>}<\/span>`<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>script<\/span>><\/span>\r\n<<\/span>\/<\/span>body<\/span>><\/span>\r\n<<\/span>\/<\/span>html<\/span>><\/span>\r\n<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                      D3.js \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c, \u043a\u0430\u0440\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e D3.js. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443 […]<\/p>\n","protected":false},"author":1,"featured_media":133524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[463],"tags":[],"class_list":["post-133523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"views":1066,"_links":{"self":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133523"}],"version-history":[{"count":1,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133523\/revisions"}],"predecessor-version":[{"id":133526,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133523\/revisions\/133526"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/media\/133524"}],"wp:attachment":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133523"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}