David-Desmaisons / Vue.D3.tree

Vue component to display tree based on D3.js layout.
https://david-desmaisons.github.io/Vue.D3.tree/tree
MIT License
874 stars 136 forks source link

Adding text size prop #60

Open covert8 opened 4 years ago

covert8 commented 4 years ago

Hi, i'm trying to add a prop to influence .treeclass .nodetree text

The way i'm trying to do this is via a computed value and prop. But I can't find where the HTML is defined to add the v-bind:style. Where would I find the template or how would you go about this?

guog commented 4 years ago

use css,

scss

.tree {
  & ::v-deep {
    text {
      font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei',Arial, sans-serif !important;
      font-size: 12px;
    }
  }
}
emelendez commented 3 years ago

my way:

<style>
  .treeclass .nodetree text {
    font-size: inherit;
  }
</style>

now the font size depends on the component (parent) style, where you can change dynamically:

<tree
      ref="myTree"
      zoomable
      :style="{fontSize: `${propOrData}rem`}"
      ...
    />