donatso / family-chart

family tree visualization built on top of d3
MIT License
179 stars 63 forks source link

[Vue]addRelative is not a function #39

Open kaikaihha opened 3 months ago

kaikaihha commented 3 months ago

Hello,I tried to import this proj on examples/create-tree/,but I found it didn't work in some cases in my Vue proj.

First,pencil and add icon didn't appear,so i found it miss some params: 'cardEditForm' and 'addRelative'.But I don't know what the parameters consists of.How should I write two arguments?

Thank you ! :)

const store = await f3.createStore({
        data: await data(),
        node_separation: 250,
        level_separation: 150,
      }),
      view = f3.d3AnimationView({
        store,
        cont: document.querySelector("#FamilyChart"),
      }),
      Card = f3.elements.Card({
        store,
        svg: view.svg,
        card_dim: {
          w: 220,
          h: 70,
          text_x: 75,
          text_y: 15,
          img_w: 60,
          img_h: 60,
          img_x: 5,
          img_y: 5,
        },
        card_display: [
          (d) => `${d.data["first_name"] || ""} ${d.data["last_name"] || ""}`,
          (d) => `${d.data["birthday"] || ""}`,
        ],
        mini_tree: true,
        link_break: false,
        // cardEditForm: () => {}, ??
        // addRelative: () => {}, ??
      });

    view.setCard(Card);
    store.setOnUpdate((props) => view.update(props || {}));
    store.update.tree({ initial: true });
kaikaihha commented 3 months ago

I finnaly find out what 'cardEditForm' and 'addRelative' I should pass.But it happened when elements were clicked:"Cannot read properties of null (reading 'jquery')" at below code:

// at index
M.Modal.init(modal, {}); 

// at Function.getInstance (materialize-css.js)
       {
          key: "getInstance",
          value: function getInstance(el) {
            var domElem = !!el.jquery ? el[0] : el;
            return domElem.M_Modal;
          }
        }

Why does 'el' has 'jquery' property? I appreciate your time!(: