繁体   English   中英

为什么 d3-lasso npm package 在 React 中不能正确导入?

Why does d3-lasso npm package not import properly in React?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试使用 React 将 d3-lasso 合并到一个 d3 项目中,我看到很多人都遇到了与我类似的问题,但我找不到有效的解决方案。 为了消除任何复杂的因素,我试图简单地让这个例子在 React 中工作。 我用 Stack 和 Github 解决方案尝试了几种排列,但我总是得到Attempted import error: 'lasso' is not exported from 'd3' (imported as 'd3'). 这是我的代码:

import React, { useRef } from 'react'
import * as d3 from 'd3'
import ReactSlider from 'react-slider'
import * as lasso from 'd3-lasso'
// import { lasso } from 'd3-lasso' also doesn’t work 
// import lasso from 'd3-lasso' also doesn't work 
import './styles.css'
import './LineChart.css'

const ClusterViewer = () => {
  const d3Chart = useRef(null)
  const createChart = () => {
    const data = [['Arsenal', -0.0032967741593940836, 0.30399753945657115], ['Chelsea', 0.2752159801936051, -0.0389675484210763], ['Liverpool', -0.005096951348655329, 0.026678627680541075], ['Manchester City', -0.004715381791104284, -0.12338379196523988], ['Manchester United', 0.06877966010653305, -0.0850615090351779], ['Tottenham', -0.3379518099485709, -0.09933664174939877]]

    const colours = d3.scaleOrdinal()
      .domain(data)
      .range(['#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D', '#2A363B'])

    const canvasW = 675
    const canvasH = 400
    const w = 365
    const h = 365
    const xPadding = 30
    const yPadding = 20
    const padding = 10

    const xScale = d3.scaleLinear()
      .range([xPadding, w - padding])
      .domain([-1, 1])

    const yScale = d3.scaleLinear()
      .range([h - yPadding, padding])
      .domain([-1, 1])

    const svg = d3.select('body')
      .append('svg')
      .attr('width', canvasW)
      .attr('height', canvasH)

    const circles = svg.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('r', 7)
      .attr('cx', d => xScale(d[1]))
      .attr('cy', d => yScale(d[2]))
      .attr('fill', d => {
        let result = null

        if (data.indexOf(d) >= 0) {
          result = colours(d)
        } else {
          result = 'white'
        }
        return result
      })
    const graphLasso = d3.lasso()
      .closePathDistance(75)
      .closePathSelect(true)
      .targetArea(svg)
      .items(circles)
      .on('start', lasso_start)
      .on('draw', lasso_draw)
      .on('end', lasso_end)

    function lasso_start() {
      graphLasso.items()
        .attr('r', 7)
        .classed('not_possible', true)
        .classed('selected', false)
    }

    function lasso_draw() {
      graphLasso.possibleItems()
        .classed('not_possible', false)
        .classed('possible', true)

      graphLasso.notPossibleItems()
        .classed('not_possible', true)
        .classed('possible', false)
    }

    function lasso_end() {
      graphLasso.items()
        .classed('not_possible', false)
        .classed('possible', false)

      graphLasso.selectedItems()
        .classed('selected', true)
        .attr('r', 7)

      graphLasso.notSelectedItems()
        .attr('r', 3.5)
    }

    const legend = svg.selectAll('.legend')
      .data(colours.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', (d, i) => `translate(0,${i * 29})`)

    legend.append('rect')
      .attr('x', canvasW - 184)
      .attr('y', 11)
      .attr('width', 18)
      .attr('height', 18)
      .style('fill', colours)

    legend.append('text')
      .attr('x', canvasW - 194)
      .attr('y', 20)
      .attr('dy', '.35em')
      .style('text-anchor', 'end')
      .text(d => d[0])

    svg.call(graphLasso)
  }

  // ...

  return (
    <div>
      <h1>
        Cluster Viewer
      </h1>
      <div>
        <script src="https://d3js.org/d3.v4.min.js" />
        <svg ref={d3Chart} />
      </div>
    </div>
  )
}

export default ClusterViewer
问题暂未有回复.您可以查看右边的相关问题.
1 在Angular 6中使用D3-Lasso

我在Angular 6项目中使用D3.Js和套索。 我已经用start() , draw()和stop()函数初始化了套索。 但是我不知道如何将此套索与我的svg绑定。 在传统的JavaScript中,它们使用以下语法。 如何在Angular中做到这一点? 这是我在Stackbl ...

3 d3-lasso在Angular 7中找不到d3-drag模块

我有一个实现散点图的简单代码(在angular 7应用程序中使用d3.js),我想在其中启用d3-lasso功能来选择点。 因此,为了做到这一点,我安装了npm i d3-lasso和npm i d3-drag 。 我正在执行的代码如下: 在浏览器中,我收到以下错误。 然后,如果我打开d3 ...

5 NPM不会正确更新包

在我的React Native( version 0.59.5 )应用程序中,我安装并链接了最新版本的React Native Gesture Handler ( version 1.2.2 )。 每当我在模拟器上运行应用程序时,我在成功构建后立即收到以下消息: TypeError: par ...

9 如何正确导入npm包中的react

所以我使用了一些我之前使用过的插件,并且在没有反应的项目中工作过。 我正在使用的插件是: -Bootstrap -Bootstrap选 -DataTables 我正在尝试使用import功能,但是如果我不将它们包含在我的index.html (通过CDN)它们就不起作用 ...

10 无法解决 npm package 和 webpack 5 中的导入“React”

我正在开发 npm package 并在那里使用 webpack 5. 这是我的配置 当我想从此库中导入组件时,出现此错误: 我认为这与外部反应和反应域有关。 但是,当我从 webpack 配置中删除外部组件时,我得到一个错误,即在使用反应挂钩时,反应应该只安装一次。 在我的主应用程序中,我使用 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM