SVG горизонтальный свиток с реагировать родной и D3 - PullRequest
Новая
       42

SVG горизонтальный свиток с реагировать родной и D3

0 голосов
/ 27 декабря 2018

Я пытаюсь нарисовать горизонтальную прокручиваемую гистограмму , используя реагирующую нативную SVG и D3.Я могу рисовать бары и не понимаю, как сделать его прокручиваемым.также, вверх по прокрутке мне нужно вызвать веб-сервис, чтобы получить некоторые детали .Может ли кто-нибудь помочь мне с этим.вот мой код:

данные 

const data=[
  {label:"jan",value:200, credit:120, debit:20},
  {label:"feb", value:200.5, credit:10, debit:20.5},
  {label:"mar", value:200, credit:50, debit:60},
  {label:"apr", value:90, credit:50, debit:80},
  {label:"may", value:210, credit:150, debit:80},
  {label:"jun", value:120, credit:30, debit:1},
  {label:"jul",value:173, credit:40, debit:20},
  {label:"aug", value:129.5, credit:10, debit:20.5},
  {label:"sep", value:80, credit:8, debit:10},
  {label:"oct", value:22, credit:5, debit:10},
  {label:"nov", value:188, credit:20, debit:20},
  {label:"dec", value:50, credit:10, debit:5}
];

функция рендеринга 

const graphMargin = 20;
const barWidth  = 5;
const colors = {
  axis: '#E4E4E4',
  bars: '#15AD13',
  debit:"red",
  credit:'#15AD13'
};
var graphHeight = height-2*graphMargin;
var graphWidth = width-2*graphMargin;
//using d3 generate scale to draw using our data
var xDomain = data.map(item=>item.label);
const xRange = [0, graphWidth+graphWidth/2];
var x = d3.scalePoint()
              .domain(xDomain)
              .range(xRange)

//using d3 generate a linear scale to fit values, max value+buffer. buffer is for looking better
const yDomain = [0, d3.max(data,d=>d.value)];
const yRange = [0, graphHeight - (0.4*graphHeight)];
var y= d3.scaleLinear()
          .domain(yDomain)
          .range(yRange)
return (

  <View style={styles.container}>

    <ScrollView horizontal={true}>
    {/* preserveAspectRatio="xMidYMid meet" width={width-20} height={height-20} 
      viewBox={{graphMargin, graphMargin, width,height}} */}
    <Svg width={width-20} height={height-20} 
        style={{overflow:"scroll"}} >
      {/* create axes */}

      {/* define x and y to height of viewport or leaving margins, so it will start drawing from
        there and as we need to give negitive y co-ordinates i.e. multiply with -1
      */}
      <G  y={graphHeight-60} x={graphMargin/2} style={{overflow:"scroll"}}>   
        {/* labels */}

        {data.map(item=>(

          <Rect 
            key={'bar1'+item.label}
            x={x(item.label)} //horizontal start position, if space needed do:  - (barWidth/2)
            y={y(item.credit)*-1} //position to start from top
            rx={2.5} //rounded corners
            height={y(item.credit)} //bar height: viewheight-bar hieght-bottom space
            width={barWidth} //bar width
            fill={colors.bars} //fill color
          />


        ))}
        {
          data.map(item=>(
            <Rect 
              key={'bar'+item.label}
              x={x(item.label)+barWidth}
              y={y(item.debit) * -1}
              rx={2.5}
              height={y(item.debit)}
              width={barWidth}
              fill="red"
            />
          ))
        }
        {data.map(item=>(
              <Text
              key={'label' + item.label}
              x={x(item.label)}
              y={20}
              textAnchor="middle"
              stroke="white">
                {item.label}
              </Text>
          ))}

      </G>

    </Svg>
    {/* <Text>test</Text> */}
    </ScrollView>
  </View>
);

}

попытка с переполнением прокрутка и видимый и попытался сохранить весь svg внутри прокрутки.это не сработало.любая помощь будет оценена.Изменить: вот как это видно на данный момент: необходимо прокрутить представление для отображения значений до декабря .enter image description here

1 Ответ

0 голосов
/ 03 января 2019

легко получить свиток для SVG.задайте ширину больше, чем ширина окна / вида и оберните ее внутри ScrollView с горизонтальным значением true.

вот пример кода: 

<ScrollView horizontal={true} onScroll={()=>this.onGraphScroll()} scrollEventThrottle={16}>
<Svg width={width+width+width} height={height-20} 
   ...
</Svg>
</ScrollView>
...