Neurosis Prevention Mechanism

    radar-map

    1.0.3 • Public • Published

    雷达图组件

    使用说明

    代码示例

    页面容器

    <div class="search-word-wrapper"></div>

    创建组件

    import RadarMap from 'radar-map'
     
    const data = {
      "secondaryKeywords": [
        {
          "thirdKeywords": [
            {
              "subKeywords": [
                "纽约",
                "底特律"
              ],
              "word": "加州"
            },
            {
              "subKeywords": [
                "洛杉矶",
                "华盛顿"
              ],
              "word": "德州"
            }
          ],
          "word": "美国"
        },
        {
          "thirdKeywords": [
            {
              "subKeywords": [
                "南京",
                "苏州"
              ],
              "word": "江苏"
            },
            {
              "subKeywords": [
                "合肥",
                "巢湖"
              ],
              "word": "安徽"
            }
          ],
          "word": "中国"
        }
      ],
      "word": "国家"
    }
     
    new RadarMap ({
      container: document.querySelector('.search-word-wrapper'),
      data,
      clickCallback: function ({ curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords }) {
        console.log("TCL: curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords", curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords)
      },
      exposureCallback: function ({ curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords }) {
        console.log("TCL: curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords", curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords)
      }
    })

    参数说明:

    • container:页面容器dom

    • data:要渲染的数据,属性要与示例中保持一致

    • clickCallback:节点的点击回调

    • exposureCallback:节点的曝光回调

      点击和曝光回调的参数说明:

      • curLevel: 当前渲染的层级
      • secondaryKeywordsIndex:如果显示的是第二级图谱,显示的中心词在数组的索引
      • thirdKeywordsIndex:如果显示的是第三级图谱,显示的中心词在数组的索引
      • fourthKeywordsIndex: 如果显示的是第三级图谱,点击的子搜索词索引
      • isBack:是否是返回按钮
      • isCenter: 是否是中心词
      • curWords: 当前点击的词

    Keywords

    none

    Install

    npm i radar-map

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    448 kB

    Total Files

    12

    Last publish

    Collaborators

    • nsrjdsyt